第一步:绑定事件

常用的与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. poj 2429 GCD &amp; LCM Inverse 【java】+【数学】

    GCD & LCM Inverse Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9928   Accepted:  ...

  2. 交叉编译strace

    下载地址:https://sourceforge.net/projects/strace/ 我下的版本是4.18, 也可以到这里下载. 下面是交叉编译用的脚本: #!/bin/bash ../conf ...

  3. Quartz 定时任务设置某个时间区间每隔一定时间触发的cron表达式

    原文:https://blog.csdn.net/yansong_8686/article/details/46991189 Cron表达式 Quartz使用类似于Linux下的Cron表达式定义时间 ...

  4. NSZombie 详解 -僵尸对象

    1.什么是僵尸对象? 简而言之,就是过度释放的对象. 2.僵尸对象有什么特点? 如果一个对象a被变成了僵尸对象,那么,在进行下面的判断时,a是会被系统当成一个对象来进行判断的.但是,如果你使用a进行其 ...

  5. 实现iOS长时间后台的两种方法:Audiosession和VOIP

    http://www.cocoachina.com/applenews/devnews/2012/1212/5313.html 我们知道iOS开启后台任务后可以获得最多600秒的执行时间,而一些需要在 ...

  6. C#编程(二十五)----------接口

    接口 如果一个类派生自一个接口,声明这个类就会实现某些函数.并不是所有的面向对象的语言都支持接口. 例如,有一个接口:IDispoable,包含一个方法Dispose(),该方法又类实现,用于清理代码 ...

  7. iReport数据库连接找不到驱动

  8. hdu2444The Accomodation of Students (最大匹配+推断是否为二分图)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...

  9. SharePoint 2016 工作流报错“没有适用于此应用程序的地址”

    前言 最近为SharePoint 2016配置工作流,创建工作流的过程中遇到这样一个错误,记录分享下来,希望能够为有需要的人带来帮助. 错误截图 创建完毕工作流,发布的时候报错,保存没有问题. 错误信 ...

  10. 用layer-list实现弧形进度条

    本文转载自:http://www.linuxidc.com/Linux/2013-04/82743.htm 之前我有写过如何用style或者是layer-list实现自定义的横向进度条(http:// ...