1.jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器。   
2.jquery form插件是基于jQuery开发的一套能够利用ajax技术提交form的框架。   
3.无论是jQuery,还是jquery form 都是老外写的。   
4.通常的jQuery ajax提交写法如下:   
5. $.post("../user/user.do?d=checkPasswordOnUpdateByAjax",{old_password:old_password.val()},function(xml){   
6.  });   
7.其中:{old_password:old_password.val()}是挂的参数,为json串格式。如果只有几个参数,这种方法还是值得一用的,如果有几十个,从软件可维护性的角度去考虑,用这种方法实在不敢恭维。我曾经写过一个根据form的页内数据元素生成Json串的方法。但是对自己写的东西总觉得不够满意,有没有一种可以提交form数据的插件呢,google一下,输入关键字 jquery form plugin 。我很荣幸的搜到了我需要的东西,既然已经有轮子,自己发明的轮子暂时先放弃。从此我对jQuery form 的依赖及使用变得一发不可收拾。在我做的项目中大量的使用了该插件进行ajax数据提交。   
8.把jquery form的相关文件导入页面   
9.<script language="javaScript" src="../static/js/base/jquery.js"></script>      <!--jquery 包-->   
10.<script language="javaScript" src="../static/js/base/jquery.form.js"></script>   <!--jquery  form包-->   
11.且二者顺序不可以放反,因为文件是自上而下解析的。   
12.function submitForm(){   
13.    var form = $("form[name=MsgForm]");   
14.    if($("input[name=user_name]").val() == null || $("input[name=user_name]").val() == ""){//这里是如果user_name为空则用ajaxform提交,否则按照传统方式提交。   
15.        //ajax form post   
16.        var options = {success:showResponse,resetForm:true,url:"../user/msg.do?d=sendMsgByAjax"};   
17.        form.ajaxForm(options);   
18.        return;   
19.    }   
20.    form.submit();// 传统form提交   
21.}   
22.function showResponse(xml){//回调函数   
23.    if(1 == xml){   
24.        alert("信息发送成功!");   
25.    }else{   
26.        alert("信息发送失败!");   
27.    }   
28.}   
29.注意:   
30.xml的值1或者-1是后台用response打出来的。如下:   
31.response.setContentType("text/html;charSet=UTF-8");    
32.response.setCharacterEncoding("UTF-8");    
33.PrintWriter pw = response.getWriter();    
34.pw.println("1");   
35.url就是form表单要提交到的地址,当然若不指定,会自动使用form里action的值。   
36.success的值也是函数,就是提交表单处理完后要做的事。
实例:

function jquerySubmit(formId,url,callback){//formId为表单id
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: url,
formId: formId,
type: 'post',
dataType: 'json',
handle: callback
};
$("#"+formId).ajaxForm(options);
$("#"+formId).submit();
}

jQuery之ajaxForm提交表单的更多相关文章

  1. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  2. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  3. jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示:   代码如下: <script src=" ...

  4. jquery submit()不能提交表单的解决方法

    <form id="form" method="get"> <input type="text" name="q ...

  5. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  6. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  7. jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)

    原文:http://www.jb51.net/article/48728.htm ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先 ...

  8. JQuery禁止回车提交表单

    //禁止回车键提交表单——动态绑定 $(function(){ $("input").on('keypress',  //所有input标签回车无效,当然,可以根据需求自定义 fu ...

  9. 使用jquery ajaxForm提交表单

    一.首先引用Jquery <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script ...

随机推荐

  1. 【动软.Net代码生成器】连接MySQL生成C#的POCO实体类(Model)

    首先是工具的下载地址: 动软.Net代码生成器 该工具官网自带完整教程: 文档:http://www.maticsoft.com/help/ 例子:http://www.maticsoft.com/h ...

  2. Java并发(二)多线程的好处

    即使编写多线程程序具有挑战性,但它仍在使用中,是因为它可以带来如下的好处: 更好的资源利用 在某些场景下程序的设计会更简单 提升程序的响应性 更好的资源利用 假设一个应用会从本地文件系统中读取和处理文 ...

  3. C语言 · 文本加密

    算法提高 9-2 文本加密   时间限制:1.0s   内存限制:256.0MB      问题描述 先编写函数EncryptChar,按照下述规则将给定的字符c转化(加密)为新的字符:"A ...

  4. [sz,rz]使用sz/rz在两台Linux设备之间传输数据

    转自:https://superuser.com/questions/604055/using-rz-and-sz-under-linux-shell zsend #!/bin/sh DEV=/dev ...

  5. oozie中调度mapreduce

    mapreduce可以直接对hdfs进行清洗和计算,这里介绍oozie中如何调度使用. 操作步骤如下: 1. 写一个mapper和reduce类,并且打包成jar包 2. 在workflow中引用ma ...

  6. ggplot2作图详解:入门函数qplot

    ggplot2作图详解:入门函数qplot   ggplot2的功能不用我们做广告,因为它的作者Hadley Wickham就说ggplot2是一个强大的作图工具,它可以让你不受现有图形类型的限制,创 ...

  7. js学习笔记17----元素的各种位置,尺寸

    1. offsetLeft[Top] 当前元素到定位父级(即offsetParent)的距离(偏移值 ). 父级没有定位: offsetParent -> body offsetLeft[Top ...

  8. 非常强大的jQuery万能浮动框插件

    支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...

  9. webstorm软件使用记录

    右边的那条线的去除:setting-editor-appearance-show right margin 勾选去掉

  10. Hive SQL执行流程分析

    转自 http://www.tuicool.com/articles/qyUzQj 最近在研究Impala,还是先回顾下Hive的SQL执行流程吧. Hive有三种用户接口: cli (Command ...