jQuery插件之jquery的form插件使用示例

jQuery插件之jquery的form插件使用示例
2010年05月02日
　　jQuery插件之jquery的form插件使用示例：ajax登录和上传
　　发表时间：2009-6-7 15:59:58 | 来源：亮亮的博客 | 字号：【大 中 小】| 颜色：【红 蓝 绿】
　　jquery的form插件应该是一个使用的比较平凡的插件了，利用form插件，可以很容易实现表单的无刷新提交，我在这里只提供两个简单的示例，因为我英文不懂，无法比较详细的翻译原文，有兴趣的自己去看英文文档。
　　form插件的基本使用：
　　options={
　　url:'upload.asp',
　　beforeSubmit: showRequest,
　　success: showResponse
　　};
　　$("#form1").ajaxForm(options);
　　url就是form表单要提交到的地址，当然若不指定，会自动使用form里action的值。
　　beforeSubmit的值是函数，就是提交表单前要做的事，一般用来验证表单。
　　success的值也是函数，就是提交表单处理完后要做的事。
　　至于取得表单中某些控件的值得方法就很简单了
　　queryString = $('#form1').formSerialize();
　　取得id为form1的表单里所有控件的值，以name1=value1&name2=value2的方式存储
　　queryStr=$("#form1 input[@type='text']").fieldSerialize();
　　取得所有input的type为text的值，以name1=value1&name2=value2的方式存储
　　iptVal=$("#form1 input[@name='rbt']").fieldValue();
　　取得name为rbt的input的值。
　　好了，现在看看示例，下面的示例演示无刷新登录
　　
　　
　　 程序代码
　　$(document).ready(function(){
　　//var queryStr=$("#form1").formSerialize();
　　//var queryStr=$("#form1 input[@type='text']").fieldSerialize();
　　//var queryStr=$("#form1 input[@name='rbt']").fieldValue();
　　options={
　　//url:'upload.asp',
　　beforeSubmit: showRequest,
　　success: showResponse
　　};
　　$("#form1").ajaxForm(options);
　　function showRequest(){
　　var userVal=$("input[@name='userName']").fieldValue();
　　var passVal=$("input[@name='password']").fieldValue();
　　if(userVal==""||passVal==""){
　　alert("用户名或密码不能为空");
　　return false;
　　}
　　else{
　　$("#ui").css("display","none");
　　$("#wait").css("display","block");
　　return true;
　　}
　　}
　　function showResponse(responseText){
　　var msg=responseText;
　　if(msg==1){
　　$("#wait").css("display","none");
　　$("#suc").css("display","block");
　　//也可把上面两句注释掉用下面的语句
　　//window.location.href="登陆成功转向页面";
　　}
　　else if(msg==2){
　　alert("登陆失败：密码不正确");
　　$("#ui").css("display","block");
　　$("#wait").css("display","none");
　　}
　　else if(msg==3){
　　alert("登陆失败：不存在该用户");
　　$("#ui").css("display","block");
　　$("#wait").css("display","none");
　　}
　　}
　　});
　　很简单吧！看看效果
　　这个就是演示无刷新上传的
　　
　　
　　 程序代码
　　$(document).ready(function(){
　　//var queryStr=$("#form1").formSerialize();
　　//var queryStr=$("#form1 input[@type='text']").fieldSerialize();
　　//var queryStr=$("#form1 input[@name='rbt']").fieldValue();
　　options={
　　url:'upload.asp',
　　beforeSubmit: showRequest,
　　success: showResponse
　　};
　　$("#form1").ajaxForm(options);
　　function showRequest(){
　　var txt1Val=$("input[@name='txt1']").fieldValue();
　　var upfileVal=$("input[@name='upfile']").fieldValue();
　　var msg="";
　　if(txt1Val=="") msg=msg+"\n输入域不能为空";
　　if(upfileVal=="") msg=msg+"\n没有选择上传文件";
　　else{
　　var m=parseInt(upfileVal.toString().lastIndexOf("."))+1;
　　var extVal=upfileVal.toString().substr(m);
　　if(extVal!="txt") msg=msg+"\n只能上传后缀为txt的文件（文本文件）";
　　}
　　if(msg==""){
　　$("#btn").css("display","none");
　　$("#loading").css("display","block");
　　return true;
　　}
　　else{
　　alert(msg);
　　return false;
　　}
　　}
　　function showResponse(responseText){
　　alert(responseText);
　　$("#btn").css("display","block");
　　$("#loading").css("display","none");
　　}
　　});
　　看看效果
　　好了，去试试吧，有什么问题在下面留言！！