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

最新推荐文章于 2020-08-20 10:55:01 发布

babyWorld

最新推荐文章于 2020-08-20 10:55:01 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/m0_37501154/article/details/89882637

版权

利用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）提交

babyWorld

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
form表单以json序列化方式提交

利用jquery提供的serializeArray方法，无需关心表单内容，只要有name属性，就会直接匹配value值，生成一个json对象。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=...
复制链接

扫一扫