jquery-form是什么

青灯夜游
Freigeben: 2022-05-16 12:03:57
Original
2388 Leute haben es durchsucht

jquery-form是指jQuery表单库,是一个表单异步提交插件,可容易地、无侵入地升级HTML表单以支持Ajax;该插件有两个核心方法:ajaxForm()和ajaxSubmit(),集合了从控制表单元素到决定如何管理提交进程的功能。

jquery-form是什么

本教程操作环境:windows7系统、jquery3.3.1版本、Dell G3电脑。

jquery-form是什么

jquery-form是指jQuery表单库,是一个基于jQuery的表单异步提交插件,用于处理表单AJAX提交,使得表单AJAX提交简单、容易,且能完整控制提交过程和处理结果,不需要任何特殊标签辅助,不影响原表单结构,只要使用该库就能使普通表单平滑升级为ajax提交表单。

插件优点

  • 简简单单几句代码,我们就可以实现表单的提交,并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。

  • 支持文件上传功能,并在新浏览器中支持进度条更新。

  • 与jQuery库完美结合,支持jQuery.ajax()函数触发的各种事件,支持jQuery.ajax()中所传递的参数。

jquery-form可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

下载地址: http://malsup.com/jquery/form/#download

核心方法 -- ajaxForm() 和 ajaxSubmit()

$('#myForm').ajaxForm(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); $('#myForm2').submit(function() { $(this).ajaxSubmit(function() { $('#output2').html("提交成功!欢迎下次再来!").show(); }); return false; //阻止表单默认提交 });
Nach dem Login kopieren

通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式

ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权

var options = { target: '#output', //把服务器返回的内容放入id为output的元素中 beforeSubmit: showRequest, //提交前的回调函数 success: showResponse, //提交后的回调函数 //url: url, //默认是form的action, 如果申明,则会覆盖 //type: type, //默认是form的method(get or post),如果申明,则会覆盖 //dataType: null, //html(默认), xml, script, json...接受服务端返回的类型 //clearForm: true, //成功提交后,清除所有表单元素的值 //resetForm: true, //成功提交后,重置所有表单元素的值 timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求 } function showRequest(formData, jqForm, options){ //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}] //jqForm: jQuery对象,封装了表单的元素 //options: options对象 var queryString = $.param(formData); //name=1&address=2 var formElement = jqForm[0]; //将jqForm转换为DOM对象 var address = formElement.address.value; //访问jqForm的DOM元素 return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证 }; function showResponse(responseText, statusText){ //dataType=xml var name = $('name', responseXML).text(); var address = $('address', responseXML).text(); $("#xmlout").html(name + " " + address); //dataType=json $("#jsonout").html(data.name + " " + data.address); }; $("#myForm").ajaxForm(options); $("#myForm2").submit(funtion(){ $(this).ajaxSubmit(options); return false; //阻止表单默认提交 });
Nach dem Login kopieren

表单提交之前进行验证: beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止 //方式一:利用formData参数 for (var i=0; i < formData.length; i++) { if (!formData[i].value) { alert('用户名,地址和自我介绍都不能为空!'); return false; } } //方式二:利用jqForm对象 var form = jqForm[0]; //把表单转化为dom对象 if (!form.name.value || !form.address.value) { alert('用户名和地址不能为空,自我介绍可以为空!'); return false; } //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。 var usernameValue = $('input[name=name]').fieldValue(); var addressValue = $('input[name=address]').fieldValue(); if (!usernameValue[0] || !addressValue[0]) { alert('用户名和地址不能为空,自我介绍可以为空!'); return false; } var queryString = $.param(formData); //组装数据 //alert(queryString); //类似 : name=1&add=2 return true; }
Nach dem Login kopieren

【推荐学习:jQuery视频教程web前端视频

Das obige ist der detaillierte Inhalt vonjquery-form是什么. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!