form表单以json序列化方式提交

利用jquery提供的serializeArray方法,无需关心表单内容,只要有name属性,就会直接匹配value值,生成一个json对象。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>  
      <form id="createStudent_form" runat="server">
        <table>
            <tr><td>Name:</td><td><input type="text" name="Name" /></td></tr>
            <tr><td>Address:</td><td><input type="text" name="Address" /></td></tr>
            <tr><td>Sex:</td><td>男<input type="radio" name="Sex" value="1" /> 女<input type="radio" name="Sex" value="0" /></td></tr>
             <tr><td>Remark:</td><td><textarea name="Remark"></textarea></td></tr>
        <tr><td><input type="button" value="submit" id="submit_btn" /></td></tr>
        </table>
    </form>
<script src="jquery-3.0.0.min.js"></script>
<script type="text/javascript"> 
    $(function () {
            $("#submit_btn").click(function () {
             var json = $("#createStudent_form").serializeArray();
             console.log(JSON.stringify(json));
              });
              })

</script>

 </body>
</html>

注意引入jquery-3.0.0.min.js,本例中我放置在和页面同级目录了

jquery-3.0.0.min.js下载地址:jquery-3.0.0.min.js

运行后的结果截图:

参考 :对象化前端表单(Form)提交

猜你喜欢

转载自blog.csdn.net/m0_37501154/article/details/89882637