Home>

serialize () serializes form elements into strings,Used for ajax requests.

serializearray () serializes form elements into json data.

Specific examples are as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="application/javascript" src="jquery-1.10.2.js"></script>
<title>serializearray () and serialize ()</title>
<script type="text/javascript">
function onclik () {
  $("#results"). html ("The difference between serializearray () and serialize () is as follows:");
  var data1=$("#form1"). serializearray ();//Automatically encapsulate the form form into json
  $("#results"). append ("<br /><b>serializearray:</b>");
  $.each (data1, function (i, field) {
    $("#results"). append (field.name + ":" + field.value + "");
  });
  $("#results"). append ("<br />");
  var data2=$("#form1"). serialize ();//Automatically encapsulate the form into json
  $("#results"). append ("<b>serialize ():</b>" + data2);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
 <p>Purchaser:
  <label for="name"></label>
  <input type="text" name="name" />
 </p>
 <p>Gender:
  <label for="sex"<&/label>
  <select name="sex" size="1">
   <option value="male">male</option>
   <option value="female">female</option>
  </select>
 </p>
 <table width="708" border="1">
  <tr>
   <td width="185">product name</td>
   <td width="205">number of products</td>
   <td width="296">product price</td>
  </tr>
  <tr>
   <td><label for="pro_name"></label>
    <input type="text" name="pro_name" /></td>
   <td><label for="pro_num"></label>
    <input type="text" name="pro_num" /></td>
   <td><label for="pro_price"></label>
    <input type="text" name="pro_price" /></td>
  </tr>
  <tr>
   <td><input type="text" name="pro_name2" /></td>
   <td><input type="text" name="pro_num2" /></td>
   <td><input type="text" name="pro_price2" /></td>
  </tr>
 </table>
 <p></p>
 <input type="button" name="submit" onclick="onclik ();" value="submit" />
</form>
</body>
</html>

The results are as follows:

Note:File, image, button, submit, reset will not be serialized

  • Previous JS implementation of string to date and comparison size example analysis
  • Next Java observer design pattern (Observable and Observer)