admin 发表于 2024-5-25 18:56:48

form表单改为AJAX提交

<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提交的流程

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

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

在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="跳转页面"
            }
         });
       });
页: [1]
查看完整版本: form表单改为AJAX提交