前后端数据交接不匹配

Question

问题描述：前端Ajax向后台传输ids数组（F12查看负载确实有数据），但是后端一直接收不到，总是说后端类型不匹配。前端试过发送ids原类型和JSON类型，后端也对应的设置过接收对应的类型变量（后端注释的代码），但是依然报错类型不匹配。求大家指点一下。

追加：前端Ajax使用{'ids':ids}数据格式， 后端注解改为 @RequestMapping(value = "/deleteAll"）， 方法参数改为public Result deleteAll(String[] ids) 起码不会直接报错停掉，但是拿到的ids为null.

case 'deleteAll':
                    var data = checkStatus.data;
                 
                    var ids = new Array();
                    $(data).each(function () {
                        ids.push(this.id);
                    })
                    console.log('ids=',ids);
                    //[2,4]
                    layer.confirm(
                        '您确认要删除么?',
                        {icon: 3},
                        function (index) {
                            $.post(
                                '/product/deleteAll',
                                JSON.stringify({'ids': ids}),   //  序列化为JSON字符串
                                // JSON.stringify(ids),   //  序列化为JSON字符串
                                // {'ids':ids},
                                function (result) {
                                    console.log(result);
                                    if (result.code == 0) {
                                        mylayer.okMsg(result.msg);
                                        //删除成功之后刷新表格，展示最新数据
                                        table.reload('tableId');
                                    } else {
                                        mylayer.errorMsg(result.msg);
                                    }
                                },
                                'json'
                            );
                        }
                    );
                    break;

@RestController
@RequestMapping("/product")
public class ProductController {
    @Autowired
    private IProductService productService;

    @RequestMapping(value = "/deleteAll", consumes = "application/json")
//    public Result deleteAll(String[] ids){
    public Result deleteAll(@RequestBody List<Integer> ids){
//    public Result deleteAll(@RequestBody Map<String, List<Integer>> idsMap){
//    public Result deleteAll(@RequestParam String[] ids){
//    public Result deleteAll(@RequestParam Integer[] ids){
        System.out.println("ProductController.deleteAll");

        /*List<Integer> idList = Arrays.stream(ids)
                .map(Integer::parseInt)
                .collect(Collectors.toList());*/
//        List<Integer> ids = idsMap.get("ids");
        System.out.println("ids ================================================== " + ids);


//        Integer deleteNum = productService.deleteAll(ids);
//        System.out.println("deleteNum = " + deleteNum);
        return Result.ok("Deletion completed");
    }
}

Answer 1

引自免费微信小程序：皆我百晓生

这个问题涉及到前端和后端的数据交互以及JSON序列化的问题。首先，让我们分析一下你的代码：

1. 前端代码尝试将ids数组转换成一个数组，并传递给后端。
2. 后端处理了这个请求，但没有收到正确的数据类型。

在后端，你需要确保你正确地接收并处理数据。这里是一个可能的解决方法：

解决方案

1. 首先，检查后端是否正确设置了Content-Type头。通常，HTTP请求应该包含一个Content-Type头，例如application/json或application/x-www-form-urlencoded，这取决于你使用的编程语言和库。

   @PostMapping("/product/deleteAll")
   public ResponseEntity<Result> deleteAll(@RequestBody List<Integer> ids) {
       // ...
   }
   

2. 确保在处理请求时正确地设置了Content-Type头。如果使用的是Jackson等库，可以这样做：

   @PostMapping("/product/deleteAll")
   public ResponseEntity<Result> deleteAll(@RequestBody @Validated DeleteAllRequest request) {
       // ...
   }
   

3. 在后端服务器配置中，确保正确设置了Content-Type头。例如，在Java中，可以通过HttpHeaders对象来添加头部：

   HttpHeaders headers = new HttpHeaders();
   headers.setContentType(MediaType.APPLICATION_JSON);
   response.setHeader(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE);
   

4. 如果你正在使用Spring Boot，可以在控制器上添加@RequestBody注解来处理JSON请求体。

5. 检查后端处理逻辑中的if (!request.ids.isEmpty())条件。如果你只处理非空ID列表，那么在处理过程中可能会出现问题。

6. 尝试使用更具体的错误消息来告知前端发生了什么问题。例如，如果你只是想删除所有产品，但后端却认为这是个错误请求，那么返回一个明确的错误信息可以帮助用户定位问题。

7. 调整请求参数的格式，以便后端能够正确解析这些值。例如，如果你打算使用Java Bean作为请求参数，而不是原始数组，那么在发送到后端之前，你需要将其转换为适当的Bean。

8. 如果上述步骤都无法解决问题，那么可能需要进一步调查数据源或数据库结构，看看是否存在任何问题。

9. 如果以上建议仍然无法解决问题，考虑使用第三方工具或服务来验证数据一致性，比如Postman、Postman Proxy或类似的服务。

示例代码示例

假设你有一个名为DeleteAllRequest的类：

import javax.validation.constraints.NotEmpty;

public class DeleteAllRequest {

    @NotEmpty(message = "IDs cannot be empty")
    private List<Integer> ids;

    // getters and setters...
}

然后，你可以这样调用deleteAll方法：

@PostMapping("/product/deleteAll")
public ResponseEntity<Result> deleteAll(@RequestBody DeleteAllRequest request) {
    // ...
}

通过这种方式，你可以确保后端接收到正确的数据类型，并且请求是有效的。