jquery表单插件form使用方法详解


Posted in Javascript onJanuary 20, 2017

传统的表单提交,都是页面跳转的形式,但是现在更流行ajax提交,那么如果希望有表单提交的简便,也有ajax的效果,有什么解决办法吗?

怎么使用

两种使用方式:

第一种方式

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-form.js"></script>
  <script>
   // 使用ajaxForm
   $(function(){
    $("#myForm").ajaxForm(function(){
     $("#output1").html("提交成功").show();
    })
   })
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="text" name="username">
   <input type="text" name="password">
   <input type="submit" value="提交">
   <div id="output1" style="display: none"></div>
  </form>
 </body>
 </html>

第二种方式

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-form.js"></script>
  <script>
   $(function(){
    //方式二 与方式一效果一样
    $("#myForm").submit(function(){
     // 使用ajaxSubmit
     $(this).ajaxSubmit(function(){
      $("#output1").html("提交成功").show();
     });
     return false;
    })
   })
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="text" name="username">
   <input type="text" name="password">
   <input type="submit" value="提交">
   <div id="output1" style="display: none"></div>
  </form>
 </body>
 </html>

感觉上第一种要 更方便一点。
其中的参数function()是提交成功后的回调函数。

利用这种提交方式,可以实现异步表单提交,很方便。但是,还是有点不满足,比如说,我可能想在提交表单之前验证一下,虽然可以手动地在提交表单动作之外完成,但是很麻烦。form插件有没有继承这样的功能呢?

二、options参数

上面只讲了form中的一个function回调函数参数,其实它还有一个参数,就是options。有什么用呢?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>

  var options = {
   target:'#output1',   // 把服务器返回的内容放入id为output1的元素中
   beforeSubmit: fun1,   // 提交前的回调函数
   success:  fun2,   // 提交后的回调函数
   dataType:     // 接收服务端返回的类型 xml,scrpit,json
  };

  // beforeSubmit前可以作验证
  function fun1(formData,jqForm,options){
   // formData 提交值的数组对象
   // jqForm 表单元素的jQuery对象,jqForm[0]是其dom对象
   // 该函数如果返回false,则阻止表单提交

   // formData可以判断全部不为空的情况
   for(var i=0;i<formData.length;i++){
    if(!formData[i].value){
     alert("都不能为空");
     return false;
    }
   }

   // jqForm可以判断某个不为空的情况
   var form = jqForm[0];
   if(!form.name.value){
    alert("name不能为空");
    return false;
   }

   // fieldValue()可以获取多值的数组形式,如checkbox
   var value = $('input[name=name]').fieldValue();
   if(!value[0]){
    return false;
   }
  }
  function fun2(responseText, statusText){
   // 根据dataType不同responseText解析方式不同,
   // 默认  responseText
   // xml  responseXml以xml解析
   // json  responseJson
  }

  $(function(){
   //方式二 与方式一效果一样
   $("#myForm").ajaxForm(options); // 要想使options生效,需要作为参数传递
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

可以看出,在beforeSubmit的回调函数fun1中,我们有三种方式获取表单数据 formData,jqForm,fieldValue 满足了各种获取值的方式,想怎么验证怎么验证。只要返回false就能阻止表单提交sucess回调的fun2也有状态值和服务端的返回数据,想怎么处理怎么处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
js静态作用域的功能。
Dec 25 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
在vue项目中引用Iview的方法
Sep 14 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
AngularJs上传前预览图片的实例代码
Jan 20 #Javascript
详解JavaScript中this的指向问题
Jan 20 #Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 #Javascript
浅谈JavaScript异步编程
Jan 20 #Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 #Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 #Javascript
BootStrap组件之进度条的基本用法
Jan 19 #Javascript
You might like
PHP和.net中des加解密的实现方法
2013/02/27 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
js同源策略详解
2015/05/21 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
JS实现百度搜索框
2021/02/25 Javascript
学生信息管理系统Python面向对象版
2019/01/30 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python多线程实现TCP服务端
2019/09/03 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
综合素质的自我鉴定
2013/10/07 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js