jquery 获取表单的内容以JSON对象形式返回 

添加一个serializeJson方法
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    div {
      margin: 10px;
    }
  </style>
</head>
<body>
  <form id="form">
    <div>username: <input type="" name="user" value=""></div>
    <div>email: <input type="text" name="email" value=""></div>
    <div>
      introdution: <textarea rows="10" cols="30" name="intro"></textarea>
    </div>
  </form>
  <div><input type="button" value="get data" id="btn"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    (function ($) {
      $.fn.serializeJson = function () {
          var serializeObj = {};
          $(this.serializeArray()).each(function () {
              serializeObj[this.name] = this.value;
          });
          return serializeObj;
      };
      $('#btn').click(function () {
        var data = $('#form').serializeJson();// 调用serializeJson方法获取表单内容
        console.log(data);
      })
    })(jQuery);
    
  </script>
</body>
</html>

 

posted on 2017-04-12 09:55  百里登风  阅读(5077)  评论(0)  编辑  收藏  举报