What is jquery-form

青灯夜游
Release: 2022-05-16 12:03:57
Original
2388 people have browsed it

jquery-form refers to the jQuery form library, which is a form asynchronous submission plug-in that can easily and non-invasively upgrade HTML forms to support Ajax; the plug-in has two core methods: ajaxForm() and ajaxSubmit( ), which brings together functionality from controlling form elements to deciding how to manage the submission process.

What is jquery-form

The operating environment of this tutorial: windows7 system, jquery3.3.1 version, Dell G3 computer.

What is jquery-form

##jquery-form refers to the jQuery form library, which is a jQuery-based form asynchronous submission plug-in for Processing form AJAX submission makes form AJAX submission simple and easy, and can completely control the submission process and processing results. It does not require any special tag assistance and does not affect the original form structure. As long as the library is used, ordinary forms can be smoothly upgraded to ajax submission. form.

Advantages of the plug-in

  • With just a few lines of code, we can submit the form and flexibly use the ajaxSubmit() function based on The triggering of any event enables asynchronous submission of the form.

  • Supports file upload function and supports progress bar update in new browsers.

  • Perfectly integrates with the jQuery library, supports various events triggered by the jQuery.ajax() function, and supports the parameters passed in jQuery.ajax().

jquery-form makes it very easy and non-intrusive to upgrade HTML forms to support Ajax. jQuery Form has two core methods - ajaxForm() and ajaxSubmit(), which combine functionality from controlling form elements to deciding how to manage the submission process. In addition, the plug-in also includes other methods: formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), clearFields() and resetForm(), etc.

Download address: http://malsup.com/jquery/form/#download

Core methods--ajaxForm() and ajaxSubmit()

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

Through the two core methods of the Form plug-in, you can easily upgrade the form submission method to the Ajax submission method without modifying the HTML code structure of the form.

ajaxForm() and ajaxSubmit( ) can accept 0 or 1 parameter. When it is a single parameter, the parameter can be either a callback function or an options object. The above example is a callback function. The options object is introduced below so that they have control over the form. More control

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; //阻止表单默认提交 });
Copy after login

Verification before form submission: beforeSubmit will be called before the form is submitted. If beforeSubmit returns false, the form submission will be prevented

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; }
Copy after login

[Recommended learning:

jQuery video tutorialwebfront-end video

The above is the detailed content of What is jquery-form. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!