如前文所說，現在在寫的課程設計老師強制你使用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");
                        }
                    });

如果有收穫的話可以掃碼側面的二維碼打賞一下喲，感謝您的鼓勵~