jQuery form serialization example code example sharing-JS Tutorial-php.cn

jQuery form serialization example code example sharing

小云云

Release： 2018-01-10 09:26:50

Original

1395 people have browsed it

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...
      }
    });
  });
});

Copy after login

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>

Copy after login

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>

Copy after login

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

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

Copy after login

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!