使用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数据

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

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