使用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来发送请求提交表单

前端页面：

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("错误！！");
}
});
});