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

来源：互联网发布：大数据是什么专业编辑：程序博客网时间：2024/05/17 09:39

本文中实现在html中使用jQuery的组件实现表单提交并在当前页面中处理返回值。

1、使用AjaxForm方式

（1）、导入js文件

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

[html] view plain copy
 print?
<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>     
<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?
$(document).ready(function() {  
       $("#formLogin").ajaxForm(function(data){  
             alert("post success." + data);  
             //Alert("post success.");  
       });            
});  

formLogin为表单的id。

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

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

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

（4）、运行效果

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

（1）、引入js文件

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

[html] view plain copy
 print?
<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?
<script type="text/javascript">      
        function deleteResource(id)  {  
            $("#div_edit").hide();  
            $.post("resource.shtml", {  
                action : "delete",  
                id : id,  
            }, function(data) {  
                var obj = new Function("return" + data)();  
                if(obj.result=="ok")  {  
                   location.reload();  
                }     
                else {  
                   $.noty.consumeAlert({layout: 'topCenter', type: 'error', dismissQueue: true});  
                   alert(obj.message);  
                }     
            });   
        }  
</script>  

3、使用隐藏iframe

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

[html] view plain copy
 print?
<html>  
    <head>  
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>    
        <!-- 处理iframe回调的代码块 -->  
        <script type="text/javascript">  
            var handlerFlag = 0;  
                  
            function setOnloadCallBask(obj, event, handler) {         
                //for most explores  
                if (null != obj && null != obj.addEventListener) {   
                    obj.addEventListener(event, handler, false);   
                }   
                //for IE  
                else if (null != obj && null != obj.attachEvent) {  
                    obj.attachEvent('on'+event, handler);   
                }   
                //not support  
                else {  
                    //选择dom元素错误  
                    throw new Error('不支持该dom元素');  
                }  
            }     
            /*  
            *call back.  
            */  
            function ActionHandler()  {  
                 //alert("call");  
                 //文档加载或刷新时也会调用，因此需要通过标志位控制，提交时将标志位置为1，在这里处理之后修改标志位为0  
                if(0 != handlerFlag)  {  
                    //do action  
                    alert("123123");  
                    var value = document.getElementById("ifActionResult").contentWindow.document.body.innerHTML;  
                                        if(null!=value)  {  
                                             var obj = eval("("+value+")");    
                                             if(obj.result=="ok")  {  
                                                top.document.location.href="resource.shtml";  
                                             }      
                                             else {  
                                                window.parent.doNotice(obj.message);                   
                                             }  
                                        }  
                                        //update flag.  
                    handlerFlag = 0;  
                }  
            }     
              
            function sub()  {  
                handlerFlag = 1;  
            }                                     
        </script>  
        <!-- 处理其他功能的代码块 -->  
        <script type="text/javascript">  
            $(document).ready(function()  {  
                //注意这里最好在文档加载完成的时候再获取元素，否则可能获取到的一直是null  
                setOnloadCallBask(document.getElementById("ifActionResult"),'load',ActionHandler);        
            });           
        </script>  
    </head>  
    <body>      
        <h1 id="myHeader">这是标题</h1>  
        <p>点击标题，会提示出它的值。</p>      
        <iframe id="ifActionResult" name="ifTmp" width="1px" height="1px" style="display: none;"></iframe>  
        <form action="" target="ifTmp">  
           <input type="submit" onClick="sub();" value="测试"/>  
        </form>  
    </body>  
</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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>用户登录</title>  
    <link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/style.css" />  
    <link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/body.css"/>  
      
    <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>         
    <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-form.js"></script>      
    <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-validate.js"></script>      
    <script type="text/javascript" src="/CarAppStore/js/noty/packaged/jquery.noty.packaged.min.js"></script>      
    <script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>      
    <script type="text/javascript">  
     $(document).ready(function() {  
           var url="manage/updater.shtml";  
           var baseRef = window.location.href;  
           var aa = baseRef.indexOf("=");  
           if(0 < aa)  {  
               url=baseRef.substring(aa+1);  
           }           
           //ajax submit.  
           $("#formLogin").submit(function()  {  
              var tmp = hex_md5($("#password").val());  
              $("#txt_passwd").val(tmp);  
              $(this).ajaxSubmit({  
                  success: function(data) { // data 保存提交后返回的数据，一般为 json 数据  
                      var obj = eval("("+data+")");    
                      if(obj.result=="ok")  {  
                         window.location.assign(url);  
                      }   
                      else {  
                         $.noty.consumeAlert({layout: 'top', type: 'error', dismissQueue: true,timeout:2000});  
                         alert("登录失败,请重试!");                       
                      }  
                  }  
              });    
              return false;  
           });               
     });      
    </script>  
</head>  
<body>  
<div class="container">  
    <section id="content">  
        <form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" target="fmResult">  
            <h1>用户登录</h1>  
            <div>  
                <input type="text" placeholder="用户名" required="" id="username" name="account"/>  
            </div>  
            <div>  
                <input type="password" placeholder="密码" required="" id="password" name="password"/>  
            </div>  
            <div class="">  
                <span class="help-block u-errormessage" id="js-server-helpinfo"> </span>  
            </div>              
            <div>  
                <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>        
                <input type="reset" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;"/>  
            </div>  
            <div>  
               <input type="hidden" id="txt_passwd" name="passwd"/>  
            </div>  
        </form>  
    </section><!-- content -->  
    <div>  
       <iframe width="1px" height="1px" name="fmResult" style="display: none;"></iframe>  
    </div>  
</div>  
<!-- container -->  
</body>  
</html>  

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

0 0