jQuery之ajaxForm提交表单

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的值也是函数,就是提交表单处理完后要做的事

时间: 2024-12-11 21:39:27

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

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

分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yListr"> <form> <ul> <li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <e

使用ajaxForm提交表单获取CKEditor值的问题

表单中有一个textarea使用了富文本框CKEditor,提交表单的时候使用的是ajaxForm,但是在后台一直获取不到textarea中的值,后来上网度娘了一下才知道原因,记录一下: 在提交表单之前需要对使用了CKEditor的textarea中的内容进行更新,具体方式如下: 只要在提交表单之前加上这段内容就可以了. 但是我还发现一个另外的问题,就是不使用ajaxForm的方式,直接在<form>标签中添加action路径提交的时候后台就可以获取到使用了CKEditor的textarea的

JQuery禁止回车提交表单

//禁止回车键提交表单——动态绑定 $(function(){ $("input").on('keypress',  //所有input标签回车无效,当然,可以根据需求自定义 function(e){ var key = window.event ? e.keyCode : e.which; if(key.toString() == "13"){ return false; } } ); });

使用jquery.form.js提交表单上传文件

方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restForm    重置表单中所有的字段内容.即将所有表单中的字段恢复到页面加载时的默认值. 疑问:ajaxForm()与ajaxSubmit()的区别: 答案:$("#form1").ajaxForm();  相当于以下两行: 1 2 3 4 $("#form1".subm

基于SpringMVC与jquery的ajax提交表单的若干情况详解

在日常的业务中,我们往往使用的是ajax提交页面数据,而不用form的action来提交整个表单.现在我来分享一下我在日常工作中遇到的一些问题. 一.$.post.$.get.$.ajax三者的区别: 顾名思义,$.post和$.get分别是采用post方式和get方式向服务器发送请求.两者的不同是,get请求的参数是在url直接以url?name1=value1&name2=value2的形式拼接而成,而post请求的参数会以请求正文的形式传送到服务器,这个学习过javaweb知识的应该都知道

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

今天写表单提交的时候需要增加一个确认提示,所以没有使用submit按钮提交,改用jq的submit(),然后问题了 <form class="form-horizontal m-t" method="post" action="@Url.Action("Edit")" id="form"> <div class="row"> <div class="

利用jquery进行ajax提交表单和附带的数据

1.获取表单数据: $form.serialize() 2.附带数据:input[status]=1 3.构造url链接:url = $form.attr('action') + '?input[status]=1' 3.ajax提交:$.post(url, post_data, function(res){xxx}, 'json'); 4.后台php接收 $_REQUEST['input'];(input是一个数组存放提交的所有数据)

jquery实现ajax提交表单信息

最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:

jquery 通过ajax 提交表单

1.需要引入以下两个js文件 <script src="Easyui/jquery-1.7.2.min.js"></script>    <script src="JS/jquery.form.js"></script> 说明:jquery-1.7.2.min.js文件可以从网上下载,当然jquery.form.js文件也可以方便的从网上下载,这里给出代码 jquery.form.js代码如下: /*! * jQuer