zoukankan      html  css  js  c++  java
  • form表单提交转为ajax方式提交

    在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把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"

    3. 在js文件中写入

    $(function(){
        $.ajax({
        type : "GET",
        url : "xxx",   
        success : function (data) {
             console.log(data);   //data即为后台返回的数据
        }
    });

    这样,就可以愉快地将form表单提交的方式转为ajax请求的方式啦。

    PS:如果想要在ajax请求中加入自定义的HTTP header,则在ajax请求中加入

    beforeSend: function(request) {
      request.setRequestHeader("Content-type", "application/json");  
    //通过这种方法可以设置自定义HTTP头字段 },
  • 相关阅读:
    MDK常用快捷键
    Visual C++ 6.0常用快捷键
    STM32内存映射
    STM32固件库
    MDK建立STM32F103*开发模板
    STM32下载方法
    Protel DXP画原理图常见错误与警告
    usb host和usb device
    IAR使用记录
    开发新产品的三个验证阶段(EVT/DVT/PVT)
  • 原文地址:https://www.cnblogs.com/bubbleStar/p/6060415.html
Copyright © 2011-2022 走看看