使用form表单提交请求如何获取后台返回的数据？

问题描述

• 一般的form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。
• 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。

解决方法

方法一：

jQuery封装了一个form表单提交有回调功能的方法

导入 jquery jquery-form.js

如下: 一个上传文件的form

<form id="form1" action="/shop/updateUserinfo" enctype="multipart/form-data" method="post">
        <table>
            <tr>
                <td>请选择头像:</td>
                <td><input type="file" name="image"/></td>
            </tr>
            <tr>
                <td><input type="submit" name="submit" value="提交"/></td>
                <td><input type="reset" name="reset" value="重置"/></td>
            </tr>
        </table>
</form>

js实现

// $(function ())是文档document加载完自动调用的函数
$(function () { /* 获取form元素，调用其ajaxForm(...)方法 内部的function(data)的data就是后台返回的数据 */ $("#form1").ajaxForm(function (data) { console.log(data); console.log("str:" + JSON.stringify(data)); } ); });

请求的url在form的action中定义，获取到的后台数据是JSON格式$(function ())不套在外面，里面的这个请求函数没法自启动后台代码无差异

方法二：

使用ajax来发送请求提交表单

前端页面：

<form id="userInfo" >
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="username" name="username" type="text" pattern="[0-9]*" placeholder="请输入姓名">
            </div>
        </div>
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label class="weui-label">年龄</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="age" name="age" type="number" placeholder="请输入年龄">
            </div>
        </div>
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="address" name="address" type="text" placeholder="请输入地址">
            </div>
        </div>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="saveUserInfo">确定</a>
        </div>
</form>

ajax请求发送数据

$("#saveUserInfo").click(function() { var formObject = {}; var formArray =$("#userInfo").serializeArray(); $.each(formArray,function(i,item){ formObject[item.name] = item.value; }); $.ajax({ url:"user/addUser", type:"post", contentType: "application/json; charset=utf-8", data: JSON.stringify(formObject), dataType: "json", success:function(data){ alert(data.msg); }, error:function(e){ alert("错误！！"); } }); });

注意

如果仅仅粗糙的使用ajax的话，那就是 $("#submit").ajax(…),　很显然里面的发给后台的数据data很难传输文件。最初，ajax出于安全性考虑，不能对文件进行操作，所以就不能通过ajax来实现文件上传。 

参考

Form表单提交，Ajax请求，$http请求的区别

Form表单获取后台返回数据

form表单ajax提交json数据

什么是单工、半双工和双工通信(最详细)

单工，半双工和全双工有何区别和联系？