Home >Web Front-end >Front-end Q&A >What is jquery.form.js

What is jquery.form.js

藏色散人Original: 2021-11-11 10:51:371728browse

jquery.form.js is a form plug-in that supports ajax form submission and ajax file upload. Its reference method is such as "8f537151dbb35229fea73b1ffc9e46419429d6e1efad07153846e528605c447e".

The operating environment of this article: windows7 system, jquery1.6.2 version, DELL G3 computer

#What is jquery.form.js?

jQuery.form.js usage

jQuery.form.js is a form plug-in that supports ajax form submission and ajax file upload.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.6.2.js"></script>
    <script src="~/Scripts/jQuery.form.js"></script>
</head>
<body>
    <div>
        <form id="ajaxForm" method="post" action="/Home/Index" enctype="multipart/form-data">
            <input type="text" name="name" />
            <input type="text" name="sex" />
            <input type="file" name="file" />
            <button type="submit" id="btnSubmit">提交1</button>
        </form>
        <button id="btnButton" type="button">提交2</button>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#ajaxForm").ajaxForm(function () {
                alert("提交成功1");
            });
            $("#ajaxForm").submit(function () {
                $(this).ajaxSubmit(function () {
                    alert("提交成功1");
                });
                return false;
            });
            $("#btnButton").click(function () {
                $("#ajaxForm").ajaxSubmit(function () {
                    alert("提交成功2");
                });
                return false;
            });
        });
    </script>
</body>
</html>

##fieldValueReturn matching insertion array The form element value in . This method returns data in the form of an array. If the element value is determined to be potentially invalid, the array is empty. None$("#formid :password").fieldValue();resetFormRestore the form to initial state. None$("#formid").resetForm();clearFormClear the form element. This method will empty all text, password, and textarea, clear the selection in the select element, and reset all radio buttons and checkbox buttons to the unselected state. None$("#formid").clearForm();clearFieldsClear field elements. Convenient when only some form elements need to be cleared. None$("#formid .specialFields").clearFields();##Options object

ajaxForm	Add all required event listeners to prepare for ajax submission of the form. ajaxForm cannot submit the form. In the document's ready function, use ajaxForm to prepare for ajax submission of the form.	Accepts 0 or 1 parameters. The parameter can be a callback function or an Options object.	$("#formid").ajaxForm();
ajaxSubmit	Use ajax to submit the form.	Accepts 0 or 1 parameters. The parameter can be a callback function or an Options object.	$("#formid").ajaxSubmit(); or $("#formid").submit(function(){ $(this).ajaxSubmit(); return false; });
formSerialize	Serialize (or serialize) the form into a query string. This method will return a string in the following format: name1=value1&name2=value2.	None	$("#formid").formSerialize();
fieldSerialize	String the field elements of the form Rowized (or serialized) into a query string. This is convenient when only some form fields need to be serialized (or serialized). Returns a string in the following format: name=value1&name2=value2.	None	$("#formid .specialFields").fieldSerialize();

Both ajaxForm and ajaxSubmit support numerous option parameters, which can be provided using an Options object.

targeturltypebeforeSubmitsuccessdataTyperesetFormclearForm##

var options={
    target : &#39;#output&#39;,    // 把服务器返回的内容放入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);
}

Recommended learning: "jquery video tutorial

Indicates elements in the page that are updated in response to the server. The element's value may be specified as a jQuery selector string, a jQuery object, or a DOM element.	Default value: null
Specify the URL for submitting form data.	Default value: the action attribute value of the form
Specify the method to submit the form data: "GET" or "POST" .	Default value: GET
Callback function called before the form is submitted. If the callback function returns false the form will not be submitted. The callback function takes three calling parameters: form data in the form of an array, jQuery form object, and the Options object passed in ajaxForm/ajaxSubmit.	Default value: null
The callback function called after the form is successfully submitted. Then the dataType option value determines whether the value of responseText or responseXML is returned.	Default value: null
Returned data type: one of null, "xml", "script", "json" .	Default value: null
Indicates whether to reset if the form is submitted successfully.	Default value: null
Indicates whether to clear the form data if the form is submitted successfully.

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

Statement：

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

Previous article：jquery lt what does it meanNext article：jquery lt what does it mean

See more

What is jquery.form.js

Related articles