Home > Article > Web Front-end > jQuery form serialization example code example sharing

jQuery form serialization example code example sharing

小云云Original: 2018-01-10 09:26:501432browse

This article mainly introduces the jQuery form serialization example code. Friends who need it can refer to it. I hope everyone can better master the jQuery form serialization knowledge.

Without further ado, I will post the code directly for you. The specific code is as follows:

$(function(){
  $(&#39;#send&#39;).click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $(&#39;#send&#39;).click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "test.json",
      data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

The above is a regular ajax request code. Two transfer formats for data parameters are listed respectively.

In order to facilitate the acquisition of data parameters during ajax requests, jquery defines several quick methods.

1.serialize()

Usage: var data = $("form").serialize();

Return value: The form The content is serialized into a string.

In this way, when submitting form data with ajax, there is no need to list each parameter one by one. Just set the data parameter to $("form").serialize().

The core method is $.param(), which is used to serialize an array or object according to key/value.

var obj = {first:"one",last:" two"};
var str = $.param(obj);
console.log(str); // first=one&last=two

In addition, the advantage of using serialize is that it comes with Chinese compilation processing. Therefore, it is recommended to use serialize.

2.serializeArray()

Usage: var jsonData = $("form").serializeArray();

Return value: Change the page The form is serialized into a JSON structure (key-value pair) object.

For example, [{"name":"lihui", "age":"20"},{...}] gets the data as jsonData[index].name

To sum up : When using ajax to submit form data, the data parameter can be set to $(form).serialize() or $(form).serializeArray(). In addition, it is recommended to refer to w3c for some details.

Finally add a complete example.

html：

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form id="demo">
    <input type="text" value="demo1" name="demo1">
    <input type="text" value="demo2" name="demo2">
    <input type="text" value="demo3" name="demo3">
    <input type="submit" value="提交" id="submit">
  </form>
</body>
</html>

JavaScript：

<script>
  // 别忘了引入jquery !!!
  $(function(){
    $("#submit").click(function(){
    // var data = $("form").serializeArray();
      var data = $("form").serialize();
      $.ajax({
        type:"GET",
        url:"1.php",
        data:data,
        dataType:"json",
        success:function(data){
          console.log(data);
        },
        error:function(xhr,error){
          console.log(error);
        }
      })
    })
  })
</script>

php Reminder: You need to configure the php environment and Open the server

<?php 
   echo json_encode($_GET);
 ?>

Related recommendations:

Notes on jquery form serialization

jQuery form serialization example code

jQuery serializes the form into an instance of an Object object

The above is the detailed content of jQuery form serialization example code example sharing. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript json jquery ajax html Object 字符串 var console 对象

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：A brief analysis of the principles, advantages and disadvantages of AjaxNext article：A brief analysis of the principles, advantages and disadvantages of Ajax

See more

jQuery form serialization example code example sharing

Related articles