使用ajax向服務端發送Form中的數據

前端代碼：

        <form action="" id="myFormUpdate">
            <p>寵物名稱: <input type="text" name="pName"></p>
            <p>
                寵物類型:
                <select name="cId">
                    <c:forEach items="${type}" var="ty">
                        <option value="${ty.cId}">${ty.cName}</option>
                    </c:forEach>
                </select>
            </p>
            <p>
                寵物標簽:
                <select name="tId">
                    <c:forEach items="${tags}" var="tag">
                        <option value="${tag.tId}">${tag.tName}</option>
                    </c:forEach>
                </select>
            </p>
            <p>
                當前狀態:
                <select name="status">
                    <option value="available">available</option>
                    <option value="pending">pending</option>
                    <option value="sold">sold</option>
                </select>
            </p>
            <input type="hidden" name="photoUrls"/>
        </form>

js代碼：

 var formData = $("#myFormUpdate").serializeArray();//將表單數據序列化成數組
        var data = {};//一個空的對象
        for (var i = 0; i < formData.length; i++) {
            data[formData[i].name] = formData[i]['value']//形成鍵值對應
        }

        $.ajax({
            type: "post",//請求方式
            url: "/pet/update",//請求服務器地址
            contentType: "application/json",//設置將要傳輸內容的編碼類型
            data:JSON.stringify(data),//經過序列化的對象
            success: function (data) {//完成時的事件
                alert(data.msg);
            },
            error: function (error) {//出現錯誤時的事件
                alert("出現異常。");
            }
        });

 

 服務端代碼：

    @RequestMapping(path = "/update",method = RequestMethod.POST)
    @ResponseBody
    public String update(@RequestBody Pet pet){ //Pet是一個實體類 
　　
        return "";
    }

 

運行結果：

 

繼續加油。 ^_^