Spring Boot+Ext JS 前后端交互之Ajax参数传递方式汇总

在Spring Boot与Ext JS前端进行Ajax参数传递时，主要有以下几种方式：

1. 通过URL传递参数
2. 使用请求体传递JSON数据
3. 使用FormData传递文件和表单数据
4. 使用请求体传递表单数据

以下是对应的示例代码：

1. 通过URL传递参数：

Ext.Ajax.request({
    url: '/your-endpoint?param1=value1&param2=value2',
    method: 'GET',
    success: function(response) {
        // 处理响应
    },
    failure: function(response) {
        // 处理错误
    }
});

2. 使用请求体传递JSON数据：

Ext.Ajax.request({
    url: '/your-endpoint',
    method: 'POST',
    params: {
        // 可以是其他类型，这里以JSON为例
        jsonData: Ext.JSON.encode({ key1: 'value1', key2: 'value2' })
    },
    success: function(response) {
        // 处理响应
    },
    failure: function(response) {
        // 处理错误
    }
});

3. 使用FormData传递文件和表单数据：

var form = Ext.getCmp('your-form-id'); // 假设你有一个表单组件
var formData = new FormData(form.getEl().dom); // 从表单获取数据
 
Ext.Ajax.request({
    url: '/your-endpoint',
    method: 'POST',
    params: formData,
    useDefaultXhrHeader: false, // 必须设置为false，以便Ext JS使用原生XHR对象
    success: function(response) {
        // 处理响应
    },
    failure: function(response) {
        // 处理错误
    }
});

4. 使用请求体传递表单数据：

Ext.Ajax.request({
    url: '/your-endpoint',
    method: 'POST',
    params: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        // 处理响应
    },
    failure: function(response) {
        // 处理错误
    }
});

在Spring Boot后端，你可能需要使用@RequestParam、@RequestBody或MultipartFile来接收这些参数。例如：

// 使用@RequestParam接收URL参数或表单数据
@PostMapping("/your-endpoint")
public ResponseEntity<?> yourMethod(@RequestParam(value = "param1", required = false) String param1) {
    // 处理请求
}
 
// 使用@RequestBody接收JSON数据
@PostMapping("/your-endpoint")
public ResponseEntity<?> yourMethod(@RequestBody YourDataType data) {
    // 处理请求
}
 
// 使用MultipartFile接收文件
@PostMapping("/your-endpoint")
public ResponseEntity<?> yourMethod(@RequestParam("file") MultipartFile file) {
    // 处理文件上传
}

以上代码提供了在Ext JS和Spring Boot之间传递参数的不同方式，并展示了如何在Spring Boot中接收这些参数。