springmvc 框架下使用restful介面引數資料傳輸
阿新 • • 發佈:2019-01-23
如前文所說,現在在寫的課程設計老師強制你使用restful介面,說是介面,其實是一種規範。關於restful詳見我之前的那篇講述關於前後端分離的帖子,給出傳送門。不得不說,在開發完一個模組之後,我仍舊沒有體會到太多這種規範帶來的好處,貌似唯一的好處是介面變得簡單了些,但付出的代價是填了幾處坑,而且總是坑在前臺的引數傳不過來,經常使用的post和get方法都沒有問題,put和delete方法出問題了。上網查了一下,是瀏覽器不支援put,delete等方法,需要加個Filter來將原來的請求轉換成標準的http put,delete方法,這樣引數的傳遞就變得正常了。專案是基於SpringMVC的,所以就以此為背景來講述啦。
1.filter需要加在web.xml中
<!-- 支援GET、POST、PUT與DELETE請求 --> <filter> <filter-name>hiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>hiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
2.比如說要根據某個表單的內容修改已經存在的記錄,則需要在被提交的表單中加一個隱藏的項(name="_method" value="put 或delete二選一"),來指明你真正想用的HTTP METHOD(比如put),然後用post或get請求向後臺提交資料,後臺接收請求後會根據這個隱藏的欄位將http method做轉換。值得注意的是html裡的form表單只支援get或post,你不加過濾器做轉換不指定隱藏的method,後臺一點資料都得不到喲。
a.form表單隱式指定http method
<form class="form-horizontal" id="editForm" role="form"> <input type="hidden" name="_method" value="put" /> <div class="form-group" hidden="true"> <label class="col-sm-2 control-label">編號:</label> <div class="col-sm-6"> <input class="form-control" type="text" id="editId" name="id"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">員工工號:</label> <div class="col-sm-6"> <input class="form-control" type="text" id="editEmployeeCode" name="employeeCode"> </div> </div> </form>
b.ajax post方法提交表單
$.ajax({
url: "/fields/",
type: 'post',
data: $("#editForm").serialize(),
async: false,
success: function (result) {
if (result.success) {
$("#editModal").modal('hide');
swal("Good job!", "修改成功", "success");
searchAll();
} else {
sweetAlert("Oops...", result.message, "error");
}
},
error: function (result) {
sweetAlert("Oops...", "更新失敗", "error");
}
});
此外我還發現,如果你用ajax傳送請求,引數很少且表示在URL裡(eg: delete /zoos/id),那麼type屬性裡指定method為delete,則只需要有那個filter就行,否則還是傳不了資料喲。
$.ajax({
url: "/fields/"+id,
type: 'DELETE',
async: false,
success: function (result) {
if (result.success) {
swal("Deleted!", "刪除成功.", "success");
searchAll();
} else {
sweetAlert("Oops...", result.message, "error");
}
},
error: function (result) {
sweetAlert("Oops...", "操作失敗", "error");
}
});
好啦,暫時這樣坑就填過去了。。。希望能幫到大家,自己也能有個印象。。。
如果有收穫的話可以掃碼側面的二維碼打賞一下喲,感謝您的鼓勵~