form表单改为AJAX提交

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37674858/article/details/78909831

一、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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

修改成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="跳转页面"  
            }  
         });
       });  
展开阅读全文

没有更多推荐了,返回首页