前端学习笔记--AJAX的应用（三）form表单改为AJAX提交

参考博客：http://www.cnblogs.com/bubbleStar/p/6060415.html
参考博客：http://blog.csdn.net/u011458469/article/details/48134581
一、form表单改成AJAX提交

原来的form格式

<form action="xxx" method="get">  //action的值是请求的url地址    <div class="form-group">        <label for="name">姓名</label>        <input type="text" class="form-control" name="name">    </div>    <div class="form-group">        <label for="jobNumber">工号</label>        <input type="number" class="form-control" name="jobNumber">    </div>    <div class="form-group">        <label for="nation">民族</label>        <input type="text" class="form-control" name="nation">    </div>    <div class="form-group">        <label for="gender">性别</label>        <input type="text" class="form-control" name="gender">    </div>    <div class="modal-footer">    　<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>　　　<button type="submit" class="btn btn-primary">提交</button>　    </div></form> 

修改成AJAX提交的流程

1. 将form元素的属性action和method去掉，添加id=”myForm”,form元素就变为<form id="myForm">

2. 将提交按钮的button的type=”submit”改为type=”button”，增加 id

3. 在js文件中写入

 $("#按键的id").click(function () {    $.ajax({              type: "POST",   //提交的方法            url:"/home/request", //提交的地址              data:$('#fm').serialize(),// 序列化表单值              async: false,              error: function(request) {  //失败的话                 alert("Connection error");              },              success: function(data) {  //成功                 alert(data);  //就将返回的数据显示出来                 window.location.href="跳转页面"              }           });       });