使⽤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实现
springboot部署// $(function ())是⽂档document加载完⾃动调⽤的函数
$(function () {
/*
sql2008密码忘了怎么办获取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请求发送数据
jquery下载文件请求
$("#saveUserInfo").click(function() {
var formObject = {};
var formArray =$("#userInfo").serializeArray();
constantly形容词形式怎么写
主图设计网站$.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来实现⽂件上传。
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。