ajax提交 list json

在Web开发中，我们经常需要通过表单提交数据，但是这种方式会导致页面刷新，给用户带来不好的体验。为了解决这个问题，我们可以使用Ajax提交数据。本文将会介绍如何使用Ajax提交List JSON。

首先，我们需要编写一个能够接收JSON数据并进行处理的后端接口，例如Java的Spring Boot框架。

@PostMapping("/submit")
public ResponseEntity<String> submitData(@RequestBody List<MyData> dataList) {
  // 对dataList进行处理
  return ResponseEntity.ok("Success");
}

这个接口通过@PostMapping注解指定请求方式为POST，并使用@RequestBody注解将请求体中的JSON数据绑定到List类型的dataList参数上。

接下来，我们需要编写前端代码。使用jQuery实现的话，代码大致如下：

var dataList = [
  {name: "张三",age: 18},{name: "李四",age: 20},{name: "王五",age: 22}
];

$.ajax({
  url: "/submit",type: "post",data: JSON.stringify(dataList),contentType: "application/json;charset=utf-8",success: function(result) {
    console.log(result);
  },error: function(error) {
    console.log(error);
  }
});

这段代码创建了一个包含三个对象的dataList，并将它通过Ajax POST请求发送到后端接口。注意，我们需要使用JSON.stringify方法将dataList转换为JSON字符串，并在请求头指定Content-Type为application/json;charset=utf-8。

最后，我们可以在后端接口中对dataList进行处理，例如将它存储到数据库中。

通过以上步骤，我们就成功地使用Ajax提交了List JSON数据。