form表单转Json提交的方法(推荐)

当我们使用form表单作为数据提交的方式时，常常需要将表单数据转换为Json格式进行提交。下面是基于jQuery的form表单转Json提交的方法。

利用serialize()方法序列化form表单

在jQuery中，可以使用serialize()方法将一个表单元素的值转化为查询字符串格式。而JavaScript提供了eval()方法，可以将字符串转换为JSON对象格式。因此，我们可以通过下面的代码将form表单序列化为JSON格式：

$('form').submit(function(e) {
    e.preventDefault();
    var formObj = $(this),
    formURL = formObj.attr('action'),
    formData = formObj.serialize(),
    formJSON = '{"' + formData.replace(/=/g, '":"').replace(/&/g, '","') + '"}';
    $.ajax({
        url: formURL,
        type: 'POST',
        data: formJSON,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
            console.log(data);
        },
        error: function() {
            console.log('An error occurred.');
        }
    });
});

利用serializeArray()方法序列化form表单

除了使用serialize()方法，我们也可以用serializeArray()方法将表单元素值进行序列化。该方法将表单元素的名称和值一起序列化。因为这种方法返回数组，因此可以更多地灵活处理序列化数据。在处理序列化后的数据时，我们可以通过for循环进行迭代。下面是基于serializeArray()方法的实例如下：

$('form').submit(function(e) {
    e.preventDefault();
    var formObj = $(this),
    formURL = formObj.attr('action'),
    formData = formObj.serializeArray(),
    formJSON = {'data': {}};
    $.each(formData, function(index, input) {
        formJSON['data'][input.name] = input.value;
    });
    $.ajax({
        url: formURL,
        type: 'POST',
        data: JSON.stringify(formJSON),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
            console.log(data);
        },
        error: function() {
            console.log('An error occurred.');
        }
    });
});

在上述代码中，我们通过遍历serializeArray()方法返回的数组来构建一个新的JSON对象。该方法返回的结果是如下的数据结构：[{name: '[form-field-name]', value: '[form-field-value]'}]。

示例

下面通过两个具体的示例来说明如何使用上述两种方式进行表单转Json提交。

示例一

<form method="post" id="myform" action="http://localhost:8888/example">
  <label for="name">名称:</label>
  <input type="text" name="name" id="name"/>
  <label for="content">内容:</label>
  <textarea name="content" id="content"></textarea>
  <button type="submit">提交</button>
</form>

$('#myform').submit(function(e) {
  e.preventDefault();
  var $form = $(this);
  var url = $form.attr('action');
  var data = $form.serialize();
  $.ajax({
    url: url,
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    },
    error: function(error) {
      console.log(error);
    }
  });
});

示例二

<form method="post" id="myform" action="http://localhost:8888/example">
  <label for="name">名称:</label>
  <input type="text" name="name" id="name"/>
  <label for="age">年龄:</label>
  <input type="text" name="age" id="age"/>
  <button type="submit">提交</button>
</form>

$('#myform').submit(function(e) {
  e.preventDefault();
  var $form = $(this);
  var url = $form.attr('action');
  var data = $form.serializeArray();
  // 构建一个新的JSON对象
  var postData = {};
  $.each(data, function(i, field){
    postData[field.name] = field.value;
  });
  $.ajax({
    url: url,
    type: 'POST',
    data: JSON.stringify(postData),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    },
    error: function(error) {
      console.log(error);
    }
  });
});

希望以上示例能够帮助你理解如何用代码实现form表单转Json提交的功能。