form表单改为AJAX提交

admin

1. <form action="xxx" method="get">  //action的值是请求的url地址
   
2.     <div class="form-group">
   
3.         <label for="name">姓名</label>
   
4.         <input type="text" class="form-control" name="name">
   
5.     </div>
   
6.     <div class="form-group">
   
7.         <label for="jobNumber">工号</label>
   
8.         <input type="number" class="form-control" name="jobNumber">
   
9.     </div>
   
10.     <div class="form-group">
    
11.         <label for="nation">民族</label>
    
12.         <input type="text" class="form-control" name="nation">
    
13.     </div>
    
14.     <div class="form-group">
    
15.         <label for="gender">性别</label>
    
16.         <input type="text" class="form-control" name="gender">
    
17.     </div>
    
18.     <div class="modal-footer">
    
19.     　<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    
20. 　　　<button type="submit" class="btn btn-primary">提交</button>　
    
21.     </div>
    
22. </form>

复制代码

修改成AJAX提交的流程

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

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

在js文件中写入

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

复制代码