原始javascript如何传值给controller

在原始的JavaScript中，要向后端的Controller传递值通常涉及通过网络请求将数据发送到服务器端。以下是一般的步骤和方法：

使用 XMLHttpRequest 发送数据

1. 创建 XMLHttpRequest 对象：

   javascript
   复制代码
   var xhr = new XMLHttpRequest();
   

2. 指定请求方法和URL：

   javascript
   复制代码
   var url = 'http://example.com/controller'; // 替换成实际的后端接口URL
   xhr.open('POST', url, true); // 使用POST方法发送数据，true表示异步请求
   

3. 设置请求头（如果有需要）：

   javascript
   复制代码
   xhr.setRequestHeader('Content-Type', 'application/json');
   // 可根据后端要求设置其他请求头，如认证信息等
   

4. 准备发送的数据：

   javascript
   复制代码
   var data = {
       key1: 'value1',
       key2: 'value2'
       // 根据需要传递的数据设置键值对
   };
   
   // 将数据转换为 JSON 字符串
   var jsonData = JSON.stringify(data);
   

5. 发送请求并处理响应：

   javascript
   复制代码
   xhr.onreadystatechange = function() {
       if (xhr.readyState === XMLHttpRequest.DONE) {
           if (xhr.status === 200) {
               console.log('请求成功');
               // 可以处理返回的数据或执行其他操作
           } else {
               console.error('请求失败: ' + xhr.status);
               // 处理错误情况
           }
       }
   };
   
   // 发送数据
   xhr.send(jsonData);
   

使用 Fetch API 发送数据（现代推荐方法）

Fetch API 提供了更现代化和简洁的方式来进行网络请求，可以替代 XMLHttpRequest：

javascript
复制代码
var url = 'http://example.com/controller'; // 替换成实际的后端接口URL
var data = {
    key1: 'value1',
    key2: 'value2'
    // 根据需要传递的数据设置键值对
};

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
        // 可根据后端要求设置其他请求头，如认证信息等
    },
    body: JSON.stringify(data)
})
.then(response => {
    if (!response.ok) {
        throw new Error('请求失败: ' + response.status);
    }
    console.log('请求成功');
    // 可以处理返回的数据或执行其他操作
})
.catch(error => {
    console.error('请求失败:', error);
    // 处理错误情况
});

关键点解析：

• XMLHttpRequest 和 Fetch API：分别是传统和现代浏览器提供的发送网络请求的API。
• 请求方法和URL：指定请求的方法（POST、GET等）和后端的接口URL。
• 请求头和数据：根据后端要求设置请求头，并将要传递的数据转换为 JSON 字符串。
• 处理响应：在 onreadystatechange 或 then() 方法中处理服务器的响应，根据需求进行后续操作或错误处理。

通过这些方法，可以在原始JavaScript中有效地向后端的Controller传递数据，实现与服务器的数据交互和通信。