将表单数据转换为 JSON答案

【问题标题】：Convert Form data to JSON将表单数据转换为 JSON
【发布时间】：2015-09-30 20:16:21
【问题描述】：

<html>
  <head></head>
  <body>
      <form name="abc" action="#" method="post">
        
        Name: <input type="text" name="name"><br>
        Age : <input type="text" age="name"><br>
        <input type="submit"><br>
        </form>
    
        </body>
</html>

任何人都可以这样编写这个 HTML 代码，当我提交这个表单时，表单数据将以 JSON 格式提交。

【问题讨论】：

服务器代码是什么样的？为什么需要 JSON？

标签： javascript json html

【解决方案1】：

检查此功能

var formDataToObject = function (formElm) {
        var formObj = new FormData(formElm),
            result = {},
            values = formObj.values(),
            keys = formObj.keys(),
            key;


            while (!(key = keys.next()).done) {
                result[key.value] = values.next().value;
            }

        return result;
    };

这里有两个注意事项：

1) 不支持多选选项，会返回最后选择的选项！！

2) 当 done 的 next() 返回对象等于 true 时，循环中断，但该对象还包含表单中 last element 的 key 在大多数情况下是提交按钮，所以如果表单中没有最后一个元素将被排除，很容易修复。

【讨论】：

【解决方案2】：

纯 JavaScript 解决方案是：

var form = document.getElementsByTagName('form')[0];

form.addEventListener('submit',function(event){
     event.preventDefault();
     var data = {
         "name":this.name.value,
         "age":this.age.value
     };

     console.log(data);
});

【讨论】：

【解决方案3】：

尝试在第二个 input type="text" 替换 name="age" 为 age="name" ，利用 .serializeArray() ， $.post()

$("form").submit(function(e) {
  e.preventDefault();
  var data = $(this).serializeArray();
  console.log(data);
  // $.post("/path/to/server", data);     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<form name="abc" action="#" method="post">

  Name:
  <input type="text" name="name">
  <br>Age :
  <input type="text" name="age">
  <br>
  <input type="submit">
  <br>
</form>

【讨论】：