第一步:绑定事件

常用的与ajax相关的事件参考如下:

1、$(selector).click(function)

2、$(selector).change(function)

3、$(selector).keyup(function)

4、$(selector).submit(function)

提交表单前,阻止提交按钮的默认的action,或返回false,如:

1、阻止提交按钮的默认的action

$("form").submit(function(e){
    e.preventDefault();  
});

2、返回false

$("form").submit(function() {
    return false;
});

第二步:将表单或对象序列化成字符串,也可以将表单序列化成数组形式;

1、将表单内容序列化为字符串
var data = $("form").serialize();  

n1=1&n2=2&n3=3&n4=4

如果为post提交,则:$.post("", data, function (rs) {}, "json");

n1 1
n2 2
n3 3
n4 4

2、序列化一个 key/value 对象:
var str = jQuery.param({});

3、将表单序列化成数组形式
var sa = $("form").serializeArray();

[
{

"name": "n1",
"value": "1"
},
{
"name": "n2",
"value": "2"
},
{
"name": "n3",
"value": "3"
},
{
"name": "n4",
"value": "4"
}
]

第三步:表单提交

表单提交可以参数以下方式:

1、jQuery.ajax([settings])

2、jQuery.get(url,data,success(response,status,xhr),dataType)

3、jQuery.post(url,data,success(response,status,xhr),dataType)

4、jQuery.getJSON(url,data,success(data,status,xhr))

5、$(selector).load(url,data,function(response,status,xhr))

6、jQuery.getScript(url,success(response,status))

详细的jQuery.ajax,点击进入

jQuery最简单的表单提交方式的更多相关文章

  1. Maven web项目(简单的表单提交) 搭建(eclipse)

    我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...

  2. html表单提交方式

    xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...

  3. JavaWeb学习日记----表单提交方式

    1.表单提交方式 (1) 使用input控件中的submit提交 代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  4. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  5. form表单提交方式

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...

  6. Jquery来对form表单提交(mvc方案)

    来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...

  7. php开发面试题---2、php常用面试题二(表单提交方式中的get和post有什么区别)

    php开发面试题---2.php常用面试题二(表单提交方式中的get和post有什么区别) 一.总结 一句话总结: 数据位置:get参数在url里面,post在主体里面 数据大小:get几kb,pos ...

  8. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  9. 使用Jquery.form.js ajax表单提交插件弹出下载提示框

    现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...

随机推荐

  1. Android按返回键退出程序但不销毁,程序后台运行,同QQ退出处理方式

    @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BA ...

  2. ArrayList 排序方法的性能对比

    20000=>ZXP 二分法 getSeriesMinSort2(list) Time is 67000 20000=>循环 getSeriesMinSortFor(list) Time ...

  3. mongodb 脚本操作

    MO='mongo'$MO << EOFuse testdbdb.dropDatabase()show dbsexit;EOF

  4. SSI(Server Side Include)简单介绍

    Server-side include(server端包含) Server-side include(server端包含)是浏览器向server请求您的文档时并入您的文档的一个文件. 当訪问者浏览器请 ...

  5. Java学习笔记——IO操作之以图片地址下载图片

    以图片地址下载图片 读取给定图片文件的内容,用FileInputStream public static byte[] mReaderPicture(String filePath) { byte[] ...

  6. 第三十二章 elk(3)- broker架构 + 引入logback

    实际中最好用的日志框架是logback,我们现在会直接使用logback通过tcp协议向logstash-shipper输入日志数据.在上一节的基础上修改!!! 一.代码 1.pom.xml < ...

  7. linux和windows时间同步问题(UTC&localtime)

    Linux使用 UTC,但是windows默认使用localtime.解决的办法如下(重启后生效). 进入windows使用regedit写入DWORD值(设置成十六进制"1"): ...

  8. ios开发第三方库--cocoapods安装

    1. ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)&quo ...

  9. Pascal's Triangle II Leetcode java

    题目: Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Return ...

  10. jQuery实现锚点跳转(就一行代码)

    /* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...