第一步:绑定事件

常用的与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. C#中泛型容器Stack<T>的用法,以及借此实现”撤销/重做”功能

    .Net为我们提供了众多的泛型集合.比如,Stack<T>先进后出,Queue<T>先进先出,List<T>集合元素可排序,支持索引,LinkedList<T ...

  2. Arcgis for JavascriptAPI 常用接口

    转自原文arcgis for javascriptAPI常用接口 var map, navToolbar, editToolbar, tileLayer, toolbar; //var mapBase ...

  3. delphi services允许跨域访问

    delphi services允许跨域访问 unit WebModuleUnit1; procedure TWebModule1.WebModule1DefaultHandlerAction(Send ...

  4. Select、Poll与Epoll比較

    (1)select select最早于1983年出如今4.2BSD中,它通过一个select()系统调用来监视多个文件描写叙述符的数组.当select()返回后,该数组中就绪的文件描写叙述符便会被内核 ...

  5. MySql错误处理(三)- 错误处理的例子

    有几种错误处理的声明形式: § 如果任何错误(不是 NOT FOUND ) , 设置 l_error 为 1 后继续执行: DECLARE CONTINUE HANDLER FOR SQLEXCEPT ...

  6. log4j1 修改FileAppender解决当天的文件没有日期后缀

    直接上代码: /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license ...

  7. spring 4.1.4 发布

    Spring 框架今天发布了三个更新版本,分别是 4.1.4.4.0.9 和 3.2.13 版本. 这三个版本都是新年的维护版本,修复了各种小 bug,小改进等. via spring blog De ...

  8. 使用自定义的Adapter来设置ListView的内容

    这里主要是学习的Adapter的机制 MainActivity.java package com.kale.listview; import android.app.Activity; import ...

  9. Java内存数据库-H2介绍及实例(SpringBoot)

    介绍 内存数据库(Embedded database或in-momery database)具有配置简单.启动速度快.尤其是其可测试性等优点,使其成为开发过程中非常有用的轻量级数据库.在spring中 ...

  10. AS 阿里巴巴Java开发规约 CheckStyle-IDEA

    Alibaba Java Coding Guidelines 简介 github地址:https://github.com/alibaba/p3c  官方文档    阿里巴巴Java开发手册(纪念版) ...