表单异步提交不返回响应数据总结

昨天和我一起学习的小伙伴让我给他解决一个问题，我花了一个下午才搞出来了，一开始一点头绪也没有，后来自己研究代码才发现原来就是表单异步提交的同时没有阻止表单提交给当前页面。导致页面刷新，异步请求还没有来的及响应就失效了。接下来我就自己总结一下表单的同步提交方式和异步提交方式。

一、首先说一说表单的同步提交方式

   <form id="newsForm" action="提交的资源地址" method="post" enctype="multipart/form-data">
                <p>                //action=“资源地址”
                    <label> 主题 </label>
                    <select name="ntid" id="ntid">
                        <option value="0">--请选择--</option>
                    </select>
                </p>
                <p>
                    <label> 标题 </label> <input name="ntitle" type="text"
                        class="opt_input" />
                </p>
                <p>
                    <label> 作者 </label> <input name="nauthor" type="text"
                        class="opt_input" />
                </p>
                <input name="action" type="hidden" value="addnews"> <input
                    type="submit" value="提交" class="opt_sub" /> <input type="reset"
                    value="重置" class="opt_sub" />
            </form>

表单提交的关键就是设置<form>元素的action属性，action设置的就是表单提交的地址。在该地址中对于表单提交的参数进行存储或者其他的操作。

二、接下来就总结一下昨天坑了我一个下午的表单异步提交吧。

1.首先昨天小伙伴的表单的代码是这样的

<form  onsubmit="user_login()">
            <h2 >用户登录</h2>
            <br/><br/>
            <label >用户名</label>
            <input id="uname" type="text" name="uname" >
            <label class="sr-only">Password</label>
            <input id="upwd" type="password" name="upwd" >
            <input type="submit" value="登录" />        
</form>

//异步登陆处理
function user_login(){
    var uname=$("#uname").val();
    var upwd=$("#upwd").val();
    alert(uname+"="+upwd);

    //异步请求login资源  未执行

    $.get("login","name="+uname+"&pwd="+upwd,function(data){
        alert("真假"+data.success);
        if(data.success){
            alert("我是true");
            location.href="my.jsp";
        }else{
            alert("我是false");
            location.href="my.jsp";
        }
    },"json");
}

如上面我的小伙伴的代码执行过程如图所示：

2.后来我又自己在异步请求下面加上了一句输出的话：

function user_login(){
    var uname=$("#uname").val();
    var upwd=$("#upwd").val();
    alert(uname+"="+upwd);

    //异步请求login资源  未执行

    $.get("login","name="+uname+"&pwd="+upwd,function(data){
        alert("真假"+data.success);
        if(data.success){
            alert("我是true");
            location.href="my.jsp";
        }else{
            alert("我是false");
            location.href="my.jsp";
        }
    },"json");

    //弹出一个提示框

    alert("我的异步请求有响应吗？");

}

后来我的页面成功跳转，并且能正确处理了表单的内容。此时表单提交的执行过程如下：

3.最后我尝试了在提交函数中返回false，为什么返回false,意思是表不提交给当前页面，所以当前页面不会刷新。此时表单提交的执行过程如下：

<form  onsubmit="return user_login()">
            <h2 >用户登录</h2>
            <br/><br/>
            <label >用户名</label>
            <input id="uname" type="text" name="uname" >
            <label class="sr-only">Password</label>
            <input id="upwd" type="password" name="upwd" >
            <input type="submit" value="登录" />       

</form>

//表单提交处理函数

function user_login(){
    var uname=$("#uname").val();
    var upwd=$("#upwd").val();
    alert(uname+"="+upwd);
    $.get("login","name="+uname+"&pwd="+upwd,function(data){
        alert("真假"+data.success);
        if(data.success){
            alert("我是true");
            location.href="my.jsp";
        }else{
            alert("我是false");
            location.href="my.jsp";
        }
    },"json");
    alert("我的异步请求有吗");
    return false;
}

终于解决了小伙伴的问题，和大家共享一下。