您的位置: 首页  >  文章  >  html中提交表单并实现不跳转页面处理返回值

html中提交表单并实现不跳转页面处理返回值

分类: 文章 • 2024-02-16 22:44:40

1、使用AjaxForm方式

（1）、导入js文件

     需要导入相关的js文件。使用ajaxForm方式需要使用到jquery和jquery-form两个js文件。如：

[html] view plain copy
 print?
  1. <script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>     
  2. <script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-form.js"></script>      

（2）、绑定表单

表单绑定它一般在$(document).ready(function () {}里定义，它能让表单不刷新页面的情况下POST到目标。如：

[html] view plain copy
 print?
  1. $(document).ready(function() {  
  2.        $("#formLogin").ajaxForm(function(data){  
  3.              alert("post success." + data);  
  4.              //Alert("post success.");  
  5.        });            
  6. });  

 formLogin为表单的id。


（3）、编写表单提交代码

如下为一个简单的表单，提交地址为userLogin.shtml，成功和失败都会返回json数据包，数据包在上面绑定的方法中处理。

[html] view plain copy
 print?
  1. <form id="formLogin" name="formLogin" action="userLogin.shtml" method="post">  
  2.     <h1>用户登录</h1>  
  3.     <div>  
  4.         <input type="text" placeholder="用户名" required="" id="username" name="account"/>  
  5.     </div>  
  6.     <div>  
  7.         <input type="password" placeholder="密码" required="" id="password" name="passwd"/>  
  8.     </div>  
  9.     <div class="">  
  10.         <span class="help-block u-errormessage" id="js-server-helpinfo"> </span>  
  11.     </div>              
  12.     <div>  
  13.         <!-- <input type="submit" value="Log in" /> -->  
  14.         <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>        
  15.         <input type="button" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;" onclick="doReset();"/>  
  16.     </div>  
  17. </form>  


（4）、运行效果

html中提交表单并实现不跳转页面处理返回值



2、使用jquery提供的get/post方法

（1）、引入js文件

使用jquery需要引入jquery的相关js文件，如：

[html] view plain copy
 print?
  1. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>    

（2）、js中使用jquery进行提交并处理返回结果

如下使用post提交数据到resource.shtml页面，参数action和id，返回一个json数据，通过判断json数据中result字段做相应处理。

[javascript] view plain copy
 print?
  1. <script type="text/javascript">      
  2.         function deleteResource(id)  {  
  3.             $("#div_edit").hide();  
  4.             $.post("resource.shtml", {  
  5.                 action : "delete",  
  6.                 id : id,  
  7.             }, function(data) {  
  8.                 var obj = new Function("return" + data)();  
  9.                 if(obj.result=="ok")  {  
  10.                    location.reload();  
  11.                 }     
  12.                 else {  
  13.                    $.noty.consumeAlert({layout: 'topCenter', type: 'error', dismissQueue: true});  
  14.                    alert(obj.message);  
  15.                 }     
  16.             });   
  17.         }  
  18. </script>  


3、使用隐藏iframe

使用隐藏的iframe的页面加载回调获取提交返回值，涉及到同域名和不同域名，这里先实现相同域名中使用iframe获取返回值并做相应处理。先看下面的例子：

[html] view plain copy
 print?
  1. <html>  
  2.     <head>  
  3.         <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>    
  4.         <!-- 处理iframe回调的代码块 -->  
  5.         <script type="text/javascript">  
  6.             var handlerFlag = 0;  
  7.                   
  8.             function setOnloadCallBask(obj, event, handler) {         
  9.                 //for most explores  
  10.                 if (null != obj && null != obj.addEventListener) {   
  11.                     obj.addEventListener(event, handler, false);   
  12.                 }   
  13.                 //for IE  
  14.                 else if (null != obj && null != obj.attachEvent) {  
  15.                     obj.attachEvent('on'+event, handler);   
  16.                 }   
  17.                 //not support  
  18.                 else {  
  19.                     //选择dom元素错误  
  20.                     throw new Error('不支持该dom元素');  
  21.                 }  
  22.             }     
  23.             /*  
  24.             *call back.  
  25.             */  
  26.             function ActionHandler()  {  
  27.                  //alert("call");  
  28.                  //文档加载或刷新时也会调用，因此需要通过标志位控制，提交时将标志位置为1，在这里处理之后修改标志位为0  
  29.                 if(0 != handlerFlag)  {  
  30.                     //do action  
  31.                     alert("123123");  
  32.                     var value = document.getElementById("ifActionResult").contentWindow.document.body.innerHTML;  
  33.                                         if(null!=value)  {  
  34.                                              var obj = eval("("+value+")");    
  35.                                              if(obj.result=="ok")  {  
  36.                                                 top.document.location.href="resource.shtml";  
  37.                                              }      
  38.                                              else {  
  39.                                                 window.parent.doNotice(obj.message);                   
  40.                                              }  
  41.                                         }  
  42.                                         //update flag.  
  43.                     handlerFlag = 0;  
  44.                 }  
  45.             }     
  46.               
  47.             function sub()  {  
  48.                 handlerFlag = 1;  
  49.             }                                     
  50.         </script>  
  51.         <!-- 处理其他功能的代码块 -->  
  52.         <script type="text/javascript">  
  53.             $(document).ready(function()  {  
  54.                 //注意这里最好在文档加载完成的时候再获取元素，否则可能获取到的一直是null  
  55.                 setOnloadCallBask(document.getElementById("ifActionResult"),'load',ActionHandler);        
  56.             });           
  57.         </script>  
  58.     </head>  
  59.     <body>      
  60.         <h1 id="myHeader">这是标题</h1>  
  61.         <p>点击标题，会提示出它的值。</p>      
  62.         <iframe id="ifActionResult" name="ifTmp" width="1px" height="1px" style="display: none;"></iframe>  
  63.         <form action="" target="ifTmp">  
  64.            <input type="submit" onClick="sub();" value="测试"/>  
  65.         </form>  
  66.     </body>  
  67. </html>  

关键点：

（1）、一个带id和name的隐藏的iframe,name用于from指定跳转目标使用，id用于js中操作该控件。指定了宽和高为1px用以避免某些浏览器直接不加载该iframe组件。指定style使得iframe不可见。

（2）、将form表单的target指定iframe的name，表单提交后将跳转到该iframe；

（3）、给from设置提交回调函数，该回调函数用于后续区分是否是提交导致的iframe加载回调；

（4）、在document加载完毕（ready）中获取并设置from的onload回调，如果在外面获取可能获取到的控件为null；

（5）、页面加载时也会回调iframe的加载函数，所以需要设定一个标志位用于记录是否是提交导致的回调。


4、使用ajaxSubmit提交

在表单的submit方法中调用ajaxSubmit进行提交，在提交前还可以在哪submit中对数据进行修改。ajaxSubmit的使用详细请自行查阅。如下为一个简单例子：

[html] view plain copy
 print?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>用户登录</title>  
  6.     <link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/style.css" />  
  7.     <link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/body.css"/>  
  8.       
  9.     <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>         
  10.     <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-form.js"></script>      
  11.     <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-validate.js"></script>      
  12.     <script type="text/javascript" src="/CarAppStore/js/noty/packaged/jquery.noty.packaged.min.js"></script>      
  13.     <script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>      
  14.     <script type="text/javascript">  
  15.      $(document).ready(function() {  
  16.            var url="manage/updater.shtml";  
  17.            var baseRef = window.location.href;  
  18.            var aa = baseRef.indexOf("=");  
  19.            if(0 < aa)  {  
  20.                url=baseRef.substring(aa+1);  
  21.            }           
  22.            //ajax submit.  
  23.            $("#formLogin").submit(function()  {  
  24.               var tmp = hex_md5($("#password").val());  
  25.               $("#txt_passwd").val(tmp);  
  26.               $(this).ajaxSubmit({  
  27.                   success: function(data) { // data 保存提交后返回的数据，一般为 json 数据  
  28.                       var obj = eval("("+data+")");    
  29.                       if(obj.result=="ok")  {  
  30.                          window.location.assign(url);  
  31.                       }   
  32.                       else {  
  33.                          $.noty.consumeAlert({layout: 'top', type: 'error', dismissQueue: true,timeout:2000});  
  34.                          alert("登录失败,请重试!");                       
  35.                       }  
  36.                   }  
  37.               });    
  38.               return false;  
  39.            });               
  40.      });      
  41.     </script>  
  42. </head>  
  43. <body>  
  44. <div class="container">  
  45.     <section id="content">  
  46.         <form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" target="fmResult">  
  47.             <h1>用户登录</h1>  
  48.             <div>  
  49.                 <input type="text" placeholder="用户名" required="" id="username" name="account"/>  
  50.             </div>  
  51.             <div>  
  52.                 <input type="password" placeholder="密码" required="" id="password" name="password"/>  
  53.             </div>  
  54.             <div class="">  
  55.                 <span class="help-block u-errormessage" id="js-server-helpinfo"> </span>  
  56.             </div>              
  57.             <div>  
  58.                 <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>        
  59.                 <input type="reset" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;"/>  
  60.             </div>  
  61.             <div>  
  62.                <input type="hidden" id="txt_passwd" name="passwd"/>  
  63.             </div>  
  64.         </form>  
  65.     </section><!-- content -->  
  66.     <div>  
  67.        <iframe width="1px" height="1px" name="fmResult" style="display: none;"></iframe>  
  68.     </div>  
  69. </div>  
  70. <!-- container -->  
  71. </body>  
  72. </html>  

     上述例子实现一个简单的登录表单，表单使用jquery validate进行表单验证，在form提交前使用md5对密码进行加密并将加密结果写入到一个隐藏的input中，然后再调用ajaxSubmit进行提交。提交成功之后会将页面重定向到一个传入的参数页面。失败时使用noty弹出一个提示对话框。demo可以自行修改验证。运行失败效果如下，成功时会定向到新页面。

html中提交表单并实现不跳转页面处理返回值

相关推荐