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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
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扩展函数
2006/10/09 PHP
php array的学习笔记
2012/05/10 PHP
浅谈php的优缺点
2015/07/14 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
javascript基础知识
2016/06/07 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
Python常见数据结构详解
2014/07/24 Python
django输出html内容的实例
2018/05/27 Python
Python读取实时数据流示例
2019/12/02 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
优秀员工评语
2014/02/10 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
医院标语大全
2014/06/23 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
代办出身证明书
2014/10/21 职场文书
2016年教代会开幕词
2016/03/04 职场文书
公司晚会主持词
2019/04/17 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android