jquery+ajax提交数据

一. ajax以表单数据提交

前端通过jquery ，后端使用了springmvc作为测试

前端

<form id="form" modelAttribute="user" enctype="multipart/form-data" method="post"
      action="userController/saveUser.action">
    <fieldset>
        <legend>Add a User</legend>
        <p>
            <label>用户名:</label>
            <input type="text" name="name"/>
            <span id="name" class="error"></span>
        </p>
        <p>
            <label>文件上传:</label>
            <input type="file" name="multipartFile" multiple="multiple">
        </p>
        <p id="buttons">
            <input id="reset" type="reset">
             <input id="submits" value="测试提交" type="button">
        </p>
    </fieldset>
</form>

$("#submits").click(function () {
    //将表单序列化
    var formData = $("#form").serialize();
    console.log(formData);
    $.ajax({
        url: "userController/testSave.action",
        type: "post",
        data: formData,
        contentType: "application/x-www-form-urlencoded",//默认
        success: function (data) {
            console.log("传输成功" + data);
        },
        error: function () {
            console.log("传输失败");
        }
    })
});

后端：

@RequestMapping(value = "testSave.action", method = {RequestMethod.POST})
public void testSave(User user, Model model, HttpServletResponse response, HttpServletRequest req) throws IOException {
    String data = req.getParameter("data");
    response.getWriter().write(data);
}

结果如下：

如上，通过$('#form').serialize()可以对 form 表单进行序列化，从而将 form 表单中的所有参数传递到服务端。

但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做 FormData 的对象，有了这个对象就可以轻松地使用 Ajax 方式进行文件上传了。

使用 FormData 进行 Ajax 请求并上传文件

$("#submits").click(function () {
    //var formData = $("#form").serialize();
    var formData = new FormData(document.getElementById("form"));
    console.log(formData);
    $.ajax({
        url: "userController/testSave.action",
        type: "post",
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log("传输成功" + data);
        },
        error: function () {
            console.log("传输失败");
        }
    })
});

FormData对象必须接收的javaScript对象，所以$("#uploadForm")`jquery对象必须转成javascript对象，+[0]。

后端

@RequestMapping(value = "testSave.action", method = {RequestMethod.POST})
@ResponseBody //支持服务器向浏览器发送各种数据,java对象以json格式返回
public String testSave(User user, Model model, HttpServletResponse response,
                       HttpServletRequest req) throws IOException {
    System.out.println(multipartFile[0].getOriginalFilename());
    return user.getName();
}

结果：

可见文件已经上传进来。

二. ajax以json数据提交

前端：

 $("#submits").click(function () {
    $.ajax({
        url: "userController/testSave.action",
        type: "post",
        data:JSON.stringify({'name': 'root'}),
        contentType: "application/json",
        success: function (data) {
            console.log("传输成功" + data);
        },
        error: function () {
            console.log("传输失败");
        }
    })
});

后端:

@RequestMapping(value = "testSave.action", method = {RequestMethod.POST})
@ResponseBody //支持服务器向浏览器发送各种数据,java对象以json格式返回
public String testSave(@RequestBody User user, Model model, HttpServletResponse response,HttpServletRequest req) throws IOException {
    return user.getName();
}

注意一点@ResponseBody并不能将String类型返回值以json格式响应。