How to use the serialize method in jquery

In jquery, the serialize() method creates a standard URL-encoded text string by serializing the form value. The serialized value can be used in the URL query string when generating an AJAX request. The syntax is " $(selector).serialize()".

The operating environment of this tutorial: windows10 system, jquery1.10.2 version, Dell G3 computer.

How to use the serialize method in jquery

serialize() definition and usage: The

serialize() method creates a standard URL-encoded text string by serializing form values. Its operation object is a jQuery object that represents a collection of form elements. You can select one or more form elements (such as inputs or text boxes), or the form element itself. Serialized values ​​can be used in URL query strings when generating AJAX requests.

Syntax:

$(selector).serialize()

Detailed description

1. The .serialize() method creates a text string represented by standard URL encoding. Its operation object is a jQuery object that represents a collection of form elements.

2. The .serialize() method can operate jQuery objects that have selected individual form elements, such as , and <select>. However, it is generally easier to select the <form> tag itself for serialization</form></select>

3. Only "successful controls" will be serialized into strings. If you do not use a button to submit the form, the submit button's value is not serialized. If you want the form element's value to be included in a sequence string, the element must use the name attribute.

4. The name in the form cannot use keywords in Js or jquery.

For example: length

The code is as follows:

<form id="form1">
   <input name="length" type="text" value="pipi" />
   <input name="blog" type="text" value="blue submarine" />
</form>
//使用:$("#form1").serialize();

The above value cannot be obtained.

serialize() example in JQuery

1, ajax serialize()

The code is as follows:

$.ajax({
    type: "POST",
    dataType: "json",
    url:ajaxCallBack,
    data:$('#myForm').serialize(),// 要提交表单的ID
    success: function(msg){
        alert(msg);
    }
});

2, serialize( ) Serialized form example

The code is as follows:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
   $("#submit").click(function(){
     alert($("#myForm").serialize());
   });
});
</script>
<form id="myForm">
昵称 <input type="text" name="username" value="admin" /><br />
密码 <input type="password" name="password" value="admin123" /><br />
<input type="button" id="submit" value="序列化表单" />
</form>

After clicking the button, it pops up:

username=admin&password=admin123

Related video tutorial recommendations:jQuery video tutorial

The above is the detailed content of How to use the serialize method in jquery. For more information, please follow other related articles on the PHP Chinese website!