ajax提交表单

ajax提交表单会有以下形式

形式一：通过虚拟表单的形式，登录系统

HTML代码：

<input type="button" id="submitForm" value="登录">

js代码：

$(function () {    $("#submitForm").click(function () {        var form = new FormData();  //创建一个模拟表单        form.append("phone","15000373065");  参数        form.append("password","123456");        $.ajax({            url:"${pageContext.request.contextPath}/user/login",             type:"post",            data:form,            processData:false,            contentType:false,            success:function(data){                console.log(data);                console.log("登录成功");            }        });    })})

后台java代码：

@ResponseBody@RequestMapping(value = "/login",method = RequestMethod.POST)public ResponseMap login(String phone, String password){    return userService.login(phone,password);}
形式二：多了文件上传
html代码：
<form id="headForm" enctype="multipart/form-data">    <input type="hidden" name="userId" value="EC316A5237C64DAABEC7E7D9722ED039"><br>    <input type="file" name="headUrl">    <img src="" id="updateImg" alt="修改图片"/><br>    <input type="button" onclick="headForm()" value="上传"></form>
说明：
enctype="multipart/form-data" 可不用写
js代码：
function headForm() {    var form = new FormData(document.getElementById("headForm"));    $.ajax({        url:"${pageContext.request.contextPath}/user/updateHeader",        type:"post",        data:form,
processData:false, //这两行代码很重要，必须加上contentType:false, //这两行代码很重要，必须加上
        success:function(result){            $('#updateImg').attr("src",result.data);        }    });}

后台java代码：
@ResponseBody@RequestMapping(value = "/updateHeader",method = RequestMethod.POST)public ResponseMap updateHeader(@RequestParam("headUrl") MultipartFile headUrl, String userId){    return userService.updateHeader(headUrl,userId);}