Home > Article > Web Front-end > Form to json implementation method

Form to json implementation method

小云云Original: 2018-01-26 09:46:011630browse

This article mainly introduces the form-to-json function implemented by jQuery, and analyzes the specific steps and related operating techniques of jQuery to encapsulate form form data into json transmission based on a complete example. Friends who need it can refer to it. I hope it can help everyone. .

<!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="js/jquery-2.0.3.js"></script>
<title>无标题文档</title>
<script type="application/javascript">
$.fn.serializeObject = function()
{
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || &#39;&#39;);
    } else {
      o[this.name] = this.value || &#39;&#39;;
    }
  });
  return o;
};
function onClik(){
    //var data = $("#form1").serializeArray(); //自动将form表单封装成json
    //alert(JSON.stringify(data));
    var jsonuserinfo = $(&#39;#form1&#39;).serializeObject();
    alert(JSON.stringify(jsonuserinfo));
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <p>进货人 :
  <label for="name"></label>
  <input type="text" name="name" id="name" />
 </p>
 <p>性别:
  <label for="sex"></label>
  <select name="sex" size="1" id="sex">
   <option value="1">男</option>
   <option value="2">女</option>
  </select>
 </p>
 <table width="708" border="1">
  <tr>
   <td width="185">商品名</td>
   <td width="205">商品数量</td>
   <td width="296">商品价格</td>
  </tr>
  <tr>
   <td><label for="pro_name"></label>
    <input type="text" name="pro_name" id="pro_name" /></td>
   <td><label for="pro_num"></label>
    <input type="text" name="pro_num" id="pro_num" /></td>
   <td><label for="pro_price"></label>
    <input type="text" name="pro_price" id="pro_price" /></td>
  </tr>
  <tr>
   <td><input type="text" name="pro_name2" id="pro_name2" /></td>
   <td><input type="text" name="pro_num2" id="pro_num2" /></td>
   <td><input type="text" name="pro_price2" id="pro_price2" /></td>
  </tr>
 </table>
 <p> </p>
 <input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>

Code effect demonstration:

Related recommendations:

Operation in Javascript JSON object, adding a simple implementation of deletion and modification

JS method of converting string string into json object

jQuery various traversal arrays and Summary of example codes for json objects

The above is the detailed content of Form to json implementation method. 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：JS merge json object instanceNext article：JS merge json object instance

See more

Form to json implementation method

Related articles