ajax 获取表单 json数据

在前端开发中，我们经常需要通过 AJAX 技术来获取后台传输的数据。而 AJAX 获取表单数据，特别是 JSON 格式数据，也是非常常见的一种场景。

// 下面是一个 AJAX 获取表单 JSON 数据的示例代码
$(function() {
  $('#submitBtn').click(function() {
    var formData = $('#form').serializeArray();
    var json = {};
    $.each(formData,function() {
      json[this.name] = this.value;
    });
    $.ajax({
      url: 'your-url',type: 'post',data: JSON.stringify(json),contentType: 'application/json;charset=UTF-8',dataType: 'json',success: function(data) {
        console.log(data);
      },error: function(jqXHR,textStatus,errorThrown) {
        console.log(textStatus,errorThrown);
      }
    });
  });
});

上面的代码中，首先通过 jQuery 的 serializeArray 方法来序列化表单数据为一个数组，然后通过遍历该数组，将数据转换成一个 JSON 对象。接着，使用 jQuery 的 AJAX 方法，向后台发送请求并传递 JSON 数据，数据类型为 JSON。

因为后台需要正确解析 JSON 数据，所以设定 contentType 为 'application/json;charset=UTF-8'

当请求成功时，success 回调函数将会处理从后台返回的 JSON 数据，并打印至控制台上。而当请求失败时，会将错误信息打印至控制台上。

通过以上代码，我们可以轻松地将表单数据转换为 JSON 格式，并通过 AJAX 技术向后台发送请求，快速地实现前后台数据传输。