表单提交、ajax请求和接收（序列化）、表单和ajax同时存在使页面不进行跳转

表单提交

实例代码：

<form action="地址" method="post">
     <button type="submit" id="btnLogin">登录</button>
</form>

注意：
	button的type只能是submit，否则无法进行提交，如：type=“button”

ajax请求和接收

前端代码

采用按钮点击事件或者form提交事件绑定一个方法包含即可
$.ajax({
    //请求方式
     type: "POST",
     //请求的媒体类型
     contentType: "application/json;charset=UTF-8",
     //请求地址
     url: "/login",
     //JSON.stringify将数据转化为json数据，数据序列化
     data: JSON.stringify({"name": "", "pass": ""}),
     // headers:{"Content-Type": "application/json"},
     dataType: 'json',
     success: function (data) {
         if (data.msg == "登录成功") {
         //请求成功页面跳转
             $(location).prop('href', 'm.html')
         }
     },
     //请求失败
     error: function (e) {
         console.log(e.status);
     }
 })

java代码（接收）

 @RequestMapping(value = "/login",method = RequestMethod.POST)
public String login(@RequestBody JSONObject jsonObject){
	String name=jsonObject.getString("name");
  	String pass=jsonObject.getString("pass");
    return "登录";
}

注意：
1）前端将数据序列化，然后传递给后端
2）后端接收JSON对象，从json数据中提取需要的值

表单和ajax同时存在

1）同时存在进行提交可能产生的情况

ajax提交一次之后，form表单再进行一次提交，从而进行两次提交

2）怎样只进行一次提交（或者说二者同时存时是想form不跳转）

1）form表单中搭配的button 的type=“button”
2）event.preventDefault()
	执行ajax代码之前加上这行代码，来阻止表单的提交

3)form表单与后端进行交互，不让其跳转

form标签中加入target属性，属性值填写页面上的iframe的id值
这样就可以实现页面的不跳转，实际上是将内部的iframe进行跳转

<form action="地址" method="post" target="#iframes">
     <button type="submit" id="btnLogin">登录</button>
</form>

<iframe id="iframes"></iframe>