单击按钮获取json格式的表单值

Question

我正试图以按钮点击代码的方式获取json格式的表单值。

$('#submit').click(function() {
    var form = $("#user_info");
    var data =form.serialize();
    console.log(data)

但我得到了像

这样的价值观

userfnmae=xyz&userlname=xyz&useremail=a@b.com&useremail= xyz&usercity=zzz&userlocation=abc&userproduct=xyz&usercomment=xyz

但我想要json格式的数据。

Answer 1

  

使用serializeArray =＆gt; 将一组表单元素编码为名称和值的数组

试试这个：

$('#g').click(function(e) {
  e.preventDefault();
  var data = $('#user_info').serializeArray();
  alert(JSON.stringify(data));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='user_info'>
  <div>
    <input type="text" name="a" value="1" id="a">
  </div>
  <div>
    <input type="text" name="b" value="2" id="b">
  </div>
  <div>
    <input type="hidden" name="c" value="3" id="c">
  </div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div>
    <select name="e">
      <option value="5" selected="selected">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
    </select>
  </div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>

Answer 2

使用此编码......

$('#submit').click(function() {
    var result= {};
     $("#user_info").serializeArray().map(function(item) {
        if ( result[item.name] ) {
            if ( typeof(result[item.name]) === "string" ) {
                result[item.name] = [config[item.name]];
            }
            result[item.name].push(item.value);
        } else {
            result[item.name] = item.value;
        }
    });
 console.log(result);
});