`
gengshu1111
  • 浏览: 29162 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery form plugin 的使用方法

阅读更多
表单的提交是一个经常要处理的东西,google了下,找到了jquery form 的插件,可以实现ajax的方式提交表单,并且设置起来很方便,代码如下:
设置调用
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.form.js'></script>

设置表单
<form id='ajaxform' >
<input name="username" type='text'/>
<input name="pwd" type='password'/>
<input type='submit' value='提交'>
</form>
<div id='target'></div>

配置:
$(function(){
       var options = {
                     target:              '#target'         //设置返回的信息所要更新的区域
                     type:                 'post',           //提交的方法,post/get,如果设置会覆盖表单中method值
                     url:                    'do.php',      //要提交到的后台页面,覆盖action值
                     data:                {sex:'male',age:'20'} //添加其他要提交的数据
                     dataType:          null/'xml'/'json'/'script'  //接受的数据类型
                     beforeSubmit:    validation,    //提交前进行的验证函数
                     resetForm:         true/false,    //表单提交成功后是否要重置表单项
                     clearForm:          true/false;   //提交成功后是否要清空表单
                     success:             response    //提交成功后响应函数
         };

        $("#ajaxform").ajaxForm(options);  //绑定ajaxform表单

         function validation(formData,jqForm,options){
                  //alert($.param(formData)),对发送的表单数据进行serialiaze序列化
                  for(var i = 0; i<formData.length; i++){
                            if(!formData[i].value){
                                 alert("信息不完整!")
                                 return false;       //注意此处若返回true则表单提交
                            }
                  }
          }

         function response(responseText,statusText,xhr,$form) {
            alert("responseText"+responseText+"status:"+statusText);
         }
})


具体可参考http://www.malsup.com/jquery/form/#api
分享到:
评论

相关推荐

    jQuery Form Plugin

    jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多...

    jQuery表单插件jquery.form.js(示例源码)

    jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的...

    jQuery.form.js

    jQuery Form Plugin version: 3.51.0

    jquery-form.js

    js使用ajax异步提交图片所需引入文件jquery-form.js

    jquery.form.min.js(4.2.2version,最新版本)

    * jQuery Form Plugin * version: 4.2.2 * Requires jQuery v1.7.2 or later * Project repository: https://github.com/jquery-form/form * Copyright 2017 Kevin Morris * Copyright 2006 M. Alsup * Dual ...

    jquery.form.js

    * jQuery Form Plugin * version: 3.51.0-2014.06.20 * Requires jQuery v1.5 or later * Copyright (c) 2014 M. Alsup * Examples and documentation at: http://malsup.com/jquery/form/ * Project ...

    jquery-form-validator-plugin:Jquery 表单验证插件

    jquery-form-validator-plugin :用于字段验证。 使用简单的节点 js 服务器进行设置 下面是关于演示应用程序的草稿。 前端框架草案: Bootstrap CSS Google Fonts DOM / UI JQuery [jquery-1.10.2] Front end ...

    jquery.form.js version 3.36.0

    * jQuery Form Plugin * version: 3.36.0-2013.06.16 * @requires jQuery v1.5 or later * Copyright (c) 2013 M. Alsup * Examples and documentation at: http://malsup.com/jquery/form/ * Project ...

    jQuery-Form:jQuery 表单插件,版本

    jQuery 表单jQuery Form Plugin,版本:3.50.0-2014.02.05,需要jQuery v1.5或更高版本

    jQuery form插件之formDdata参数校验表单及验证后提交

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程,通过本文给大家介绍jQuery form插件之formDdata参数校验表单及验证后提交的相关知识,感兴趣的朋友一起学习吧

    jQueryFormPlugin允许你轻松和不显眼地升级HTML表单以使用AJAX

    jQuery Form Plugin允许你轻松和不显眼地升级HTML表单以使用AJAX。 主要方法,ajaxForm和ajaxSubmit,从表单元素收集信息,以确定如何管理提交过程。 这两种方法都支持许多选项,使您可以完全控制数据的提交方式。

    jquery.form.js 无刷新异步提交表单js文件

    jquery.form.js 无刷新异步提交表单js文件 /** * jQuery Form Plugin * version: 3.51.0-2014.06.20 * Requires jQuery v1.5 or later * Copyright (c) 2014 M. Alsup **/

    jquery插件使用方法大全

    基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。 当使用jquery时,推荐使用代码1。 编辑本段事件机制  我们大量使用的事件可能就是button的onclick...

    jquery提交form表单时禁止重复提交的方法

    代码如下:$(document).ready(function() { $(‘form’).submit(function() { if(typeof jQuery.data(this, “disabledOnSubmit”) == ‘undefined’) { jQuery.data(this, “disabledOnSubmit”, { submited: ...

    jQuery Validation Plugin验证插件手动验证

    jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 正常的验证模式如下: &lt;form id="ff" action=...

    formPlugin:一个基于jQuery && json2的表单数据json方式提交的插件

    formPlugin based on jQuery ...基于jQuery 1.8.x && json2.js 的表单提交插件支持chrome firefox ie8及以上版本插件在utf-8编码环境下构建需要utf-8编码环境的页面才能正常使用[Details] lib: formplugin and depende

    The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3

    Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3

    jquery-validate

    jQuery form validate plugin,包含jQuery,form,validate JS库和Demo

    form-checker:jQuery插件,可帮助在提交之前检查表单值

    jQuery formChecker Plugin 概述 jQuery formChecker Plugin是一个表单验证的插件,来源于实际的项目,实现上参考了工作中用到的后端验证。 快速开始 引入jQuery,1.4版本以上。 引入jquery.formChecker.js。 对要...

Global site tag (gtag.js) - Google Analytics