問題描述
- 一般的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來實現文件上傳。