表单的提交是一个经常要处理的东西,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 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多...
jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的...
jQuery Form Plugin version: 3.51.0
js使用ajax异步提交图片所需引入文件jquery-form.js
* 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 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 :用于字段验证。 使用简单的节点 js 服务器进行设置 下面是关于演示应用程序的草稿。 前端框架草案: Bootstrap CSS Google Fonts DOM / UI JQuery [jquery-1.10.2] Front end ...
* 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 表单jQuery Form Plugin,版本:3.50.0-2014.02.05,需要jQuery v1.5或更高版本
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程,通过本文给大家介绍jQuery form插件之formDdata参数校验表单及验证后提交的相关知识,感兴趣的朋友一起学习吧
jQuery Form Plugin允许你轻松和不显眼地升级HTML表单以使用AJAX。 主要方法,ajaxForm和ajaxSubmit,从表单元素收集信息,以确定如何管理提交过程。 这两种方法都支持许多选项,使您可以完全控制数据的提交方式。
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的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。 当使用jquery时,推荐使用代码1。 编辑本段事件机制 我们大量使用的事件可能就是button的onclick...
代码如下:$(document).ready(function() { $(‘form’).submit(function() { if(typeof jQuery.data(this, “disabledOnSubmit”) == ‘undefined’) { jQuery.data(this, “disabledOnSubmit”, { submited: ...
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 正常的验证模式如下: <form id="ff" action=...
formPlugin based on jQuery ...基于jQuery 1.8.x && json2.js 的表单提交插件支持chrome firefox ie8及以上版本插件在utf-8编码环境下构建需要utf-8编码环境的页面才能正常使用[Details] lib: formplugin and depende
Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
jQuery form validate plugin,包含jQuery,form,validate JS库和Demo
jQuery formChecker Plugin 概述 jQuery formChecker Plugin是一个表单验证的插件,来源于实际的项目,实现上参考了工作中用到的后端验证。 快速开始 引入jQuery,1.4版本以上。 引入jquery.formChecker.js。 对要...