<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头字段
},

  

form表单提交转为ajax方式提交的更多相关文章

  1. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  2. jquery.form.js实现将form提交转为ajax方式提交的方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  3. 利用jquery.form.js实现将form提交转为ajax方式提交的方法(带上传的表单提交)

    提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...

  4. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  5. 使用ajax提交form表单,包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  6. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  7. 将form表单元素转为实体对象 或集合 -ASP.NET C#

    简介: 做WEBFROM开发的同学都知道后台接收参数非常麻烦 虽然MVC中可以将表单直接转为集实,但不支持表单转为 LIST<T>这种集合 单个对象的用法: 表单: <input n ...

  8. form表单1的ajax验证

    form表单的ajax验证1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  9. 使用ajax提交form表单,包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

随机推荐

  1. POJ1006 Biorhythms —— 中国剩余定理

    题目链接:https://vjudge.net/problem/POJ-1006 Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total ...

  2. Codeforces Round #173 (Div. 2) E. Sausage Maximization —— 字典树 + 前缀和

    题目链接:http://codeforces.com/problemset/problem/282/E E. Sausage Maximization time limit per test 2 se ...

  3. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  4. centos 配置

    安装 node 源地址: http://my.oschina.net/blogshi/blog/260953 (一) 编译好的文件 简单说就是解压后,在bin文件夹中已经存在node以及npm,如果你 ...

  5. ubuntu的ufw如何开放特定端口?

    ubuntu的ufw如何开放特定端口? 1.安装 sudo apt-get install ufw 2.开启 sudo ufw enable 默认关闭外部访问 sudo ufw default den ...

  6. linux下syslog使用说明

    转自:http://blog.chinaunix.net/uid-25120309-id-3359929.html syslog 系统日志应用  1) 概述       syslog是Linux系统默 ...

  7. HihoCoder 1504 : 骑士游历 (矩阵乘法)

    描述 在8x8的国际象棋棋盘上给定一只骑士(俗称“马”)棋子的位置(R, C),小Hi想知道从(R, C)开始移动N步一共有多少种不同的走法. 输入 第一行包含三个整数,N,R和C. 对于40%的数据 ...

  8. shell---rpm

    [root@master src]# rpm -qpl epel-release-latest-6.noarch.rpm         ##查询该rpm包安装了什么warning: epel-rel ...

  9. ubuntu16.04 ROS安转及RVIZ启动

    1.软件中心配置 首先打开软件和更新对话框,打开后按照下图进行配置(确保你的"restricted", "universe," 和 "multiver ...

  10. asio 中strand的作用

    namespace { // strand提供串行执行, 能够保证线程安全, 同时被post或dispatch的方法, 不会被并发的执行. // io_service不能保证线程安全 boost::a ...