ajax中data传参的两种方式分析

当使用 AJAX 进行数据交互时，我们需要将请求的数据传递给后端进行处理。在 jQuery 中，可以通过 data 参数来传递数据。一般来说，data 传参的方式有两种：对象字面量和序列化字符串。下面分别进行详细讲解：

对象字面量的方式

对象字面量的方式是通过 JavaScript 中对象的方式来定义数据，然后传递给后端。例如：

$.ajax({
  url: '/api',
  type: 'POST',
  dataType: 'json',
  data: {
    name: '张三',
    age: 25
  },
  success: function(data) {
    console.log(data);
  }
});

上面的代码中，我们在 data 参数中传递了一个对象字面量，包含了姓名和年龄两个属性。后端可以通过请求体中的数据来获取这些值，并进行处理。

对象字面量的方式相对灵活，我们可以根据需要自由地定义数据的结构和属性。

序列化字符串的方式

序列化字符串的方式是将数据转换成一定格式的字符串，然后传递给后端。在 jQuery 中，可以使用 $.param() 方法将对象转换成字符串，例如：

$.ajax({
  url: '/api',
  type: 'POST',
  dataType: 'json',
  data: $.param({
    name: '张三',
    age: 25
  }),
  success: function(data) {
    console.log(data);
  }
});

上面的代码中，我们使用了 $.param() 方法将对象字面量转换成了一个字符串，然后传递给了后端。

序列化字符串方式相对来说比较简单，但是我们需要注意，它只适用于简单的数据结构，如果数据比较复杂，建议使用对象字面量的方式。

示例1：使用对象字面量的方式传递数据

以下是一个实际的案例，我们在表单提交时，将表单中的数据用对象字面量的方式来传递给后端。

HTML 代码：

<form id="myForm">
  <input type="text" name="name" placeholder="姓名">
  <input type="number" name="age" placeholder="年龄">
  <button type="submit">提交</button>
</form>

JavaScript 代码：

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: '/api',
    type: 'POST',
    dataType: 'json',
    data: $(this).serialize(),
    success: function(data) {
      console.log(data);
    }
  });
});

上面的代码中，我们使用了 jQuery 的 serialize() 方法，将表单序列化成一个字符串，然后传递给了后端。

示例2：使用序列化字符串的方式传递数据

以下是一个实际的案例，我们需要向后端提交一个 JSON 对象，但是由于它的数据比较简单，我们选择使用序列化字符串的方式。

JavaScript 代码：

$.ajax({
  url: '/api',
  type: 'POST',
  dataType: 'json',
  data: $.param({
    name: '张三',
    age: 25
  }),
  success: function(data) {
    console.log(data);
  }
});

上面的代码中，我们使用了 $.param() 方法将对象字面量转换成了一个字符串，然后传递给了后端。

综上所述，data 传参的方式有两种：对象字面量和序列化字符串。我们可以根据需求选择合适的方式来传递数据。