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方式提交,需要做以下几个改变:
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方式提交的更多相关文章
- jquery.form.js实现将form提交转为ajax方式提交的使用方法
本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...
- jquery.form.js实现将form提交转为ajax方式提交的方法
本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...
- 利用jquery.form.js实现将form提交转为ajax方式提交的方法(带上传的表单提交)
提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- 使用ajax提交form表单,包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
- form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...
- 将form表单元素转为实体对象 或集合 -ASP.NET C#
简介: 做WEBFROM开发的同学都知道后台接收参数非常麻烦 虽然MVC中可以将表单直接转为集实,但不支持表单转为 LIST<T>这种集合 单个对象的用法: 表单: <input n ...
- form表单1的ajax验证
form表单的ajax验证1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 使用ajax提交form表单,包括ajax文件上传
前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...
随机推荐
- POJ1006 Biorhythms —— 中国剩余定理
题目链接:https://vjudge.net/problem/POJ-1006 Biorhythms Time Limit: 1000MS Memory Limit: 10000K Total ...
- Codeforces Round #173 (Div. 2) E. Sausage Maximization —— 字典树 + 前缀和
题目链接:http://codeforces.com/problemset/problem/282/E E. Sausage Maximization time limit per test 2 se ...
- 利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
- centos 配置
安装 node 源地址: http://my.oschina.net/blogshi/blog/260953 (一) 编译好的文件 简单说就是解压后,在bin文件夹中已经存在node以及npm,如果你 ...
- ubuntu的ufw如何开放特定端口?
ubuntu的ufw如何开放特定端口? 1.安装 sudo apt-get install ufw 2.开启 sudo ufw enable 默认关闭外部访问 sudo ufw default den ...
- linux下syslog使用说明
转自:http://blog.chinaunix.net/uid-25120309-id-3359929.html syslog 系统日志应用 1) 概述 syslog是Linux系统默 ...
- HihoCoder 1504 : 骑士游历 (矩阵乘法)
描述 在8x8的国际象棋棋盘上给定一只骑士(俗称“马”)棋子的位置(R, C),小Hi想知道从(R, C)开始移动N步一共有多少种不同的走法. 输入 第一行包含三个整数,N,R和C. 对于40%的数据 ...
- shell---rpm
[root@master src]# rpm -qpl epel-release-latest-6.noarch.rpm ##查询该rpm包安装了什么warning: epel-rel ...
- ubuntu16.04 ROS安转及RVIZ启动
1.软件中心配置 首先打开软件和更新对话框,打开后按照下图进行配置(确保你的"restricted", "universe," 和 "multiver ...
- asio 中strand的作用
namespace { // strand提供串行执行, 能够保证线程安全, 同时被post或dispatch的方法, 不会被并发的执行. // io_service不能保证线程安全 boost::a ...