信息技术

当前位置: 主页 > 编程语言 > JavaScript >

利用jQuery Form插件实现表单的ajax提交

时间:2010-05-17 09:03来源:未知 作者:admin 点击:
jQuery 的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器。 jquery form插件是基于jQuery开发的一套能够利用 ajax 技术提交form的框架。 无论是jQuery,还是jq
jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器。
jquery form插件是基于jQuery开发的一套能够利用ajax技术提交form的框架。
无论是jQuery,还是jquery form 都是老外写的。
通常的jQuery ajax提交写法如下:
 $.post("../user/user.do?d=checkPasswordOnUpdateByAjax",{old_password:old_password.val()},function(xml){
  });
其中:{old_password:old_password.val()}是挂的参数,为json串格式。如果只有几个参数,这种方法还是值得一用的,如果有几十个,从软件可维护性的角度去考虑,用这种方法实在不敢恭维。我曾经写过一个根据form的页内数据元素生成Json串的方法。但是对自己写的东西总觉得不够满意,有没有一种可以提交form数据的插件呢,google一下,输入关键字 jquery form plugin 。我很荣幸的搜到了我需要的东西,既然已经有轮子,自己发明的轮子暂时先放弃。从此我对jQuery form 的依赖及使用变得一发不可收拾。在我做的项目中大量的使用了该插件进行ajax数据提交。
把jquery form的相关文件导入页面
<script language="javaScript" src="../static/js/base/jquery.js"></script>      <!--jquery 包-->
<script language="javaScript" src="../static/js/base/jquery.form.js"></script>   <!--jquery  form包-->
且二者顺序不可以放反,因为文件是自上而下解析的。
function submitForm(){
    var form = $("form[name=MsgForm]");
    if($("input[name=user_name]").val() == null || $("input[name=user_name]").val() == ""){//这里是如果user_name为空则用ajaxform提交,否则按照传统方式提交。
        //ajax form post
        var options = {success:showResponse,resetForm:true,url:"../user/msg.do?d=sendMsgByAjax"};
        form.ajaxForm(options);
        return;
    }
    form.submit();//传统form提交
}
function showResponse(xml){//回调函数
    if(1 == xml){
        alert("信息发送成功!");
    }else{
        alert("信息发送失败!");
    }
}
注意:
xml的值1或者-1是后台用response打出来的。如下:
response.setContentType("text/html;charSet=UTF-8"); 
response.setCharacterEncoding("UTF-8"); 
PrintWriter pw = response.getWriter(); 
pw.println("1");
url就是form表单要提交到的地址,当然若不指定,会自动使用form里action的值。
success的值也是函数,就是提交表单处理完后要做的事。
附 :
jQuery1.3.2.js下载地址  http://www.javadn.com/read.php?tid-676.html
jQuery Form Plugin 下载地址:http://www.javadn.com/read.php?tid-925.html
jQuery Form Plugin api:  http://www.javadn.com/read.php?tid-670.html 
jQuery 中文参考手册:http://www.javadn.com/shouce/jquery/
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片