Laravel中通过Ajax向控制器传递字符串变量无法获取正确数据的技术求助

让我们一步步排查并修复你的代码问题，主要有几个关键错误导致你拿不到正确的数据：

1. Ajax请求的核心错误 #

问题点： #

• URL写法错误：你写的'/\{task_id\}/\{newTask\}'是固定字符串，没有将实际的变量值替换进去，导致请求的URL根本不包含真实的task_id和newTask内容。
• send方法参数错误：XMLHttpRequest.send()只能接受一个参数，你传了两个字符串参数，第二个会被直接忽略，导致newTask根本没发送到后端。
• 缺少请求结果监听：你没有监听请求完成的事件，无法看到后端返回的具体响应。

修正后的Ajax代码： #

function updateTask() { 
    var task_id = document.getElementById('edit').getAttribute('edit_task_id'); 
    var newTask = document.getElementById('edit_task').value; 
    var csrf = document.querySelector('meta[name="csrf-token"]').content; 
    var close = document.getElementById('close'); 
    var editob = new XMLHttpRequest(); 

    // 改用正确的URL（这里假设我们把参数放在请求体，路由定义为/tasks/edit）
    editob.open('POST', '/tasks/edit', true); 
    editob.setRequestHeader('X-CSRF-Token', csrf); 
    editob.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 

    // 修正send参数：拼接成一个完整的表单字符串，并对参数编码防止特殊字符问题
    editob.send("task_id=" + encodeURIComponent(task_id) + "&newTask=" + encodeURIComponent(newTask)); 

    // 添加请求完成监听，查看响应结果
    editob.onload = function() {
        if (this.status >= 200 && this.status < 400) {
            console.log('后端响应:', this.responseText);
            // 成功后可以关闭弹窗等操作
            close.click();
        } else {
            console.error('请求失败，状态码:', this.status);
        }
    };

    console.log(newTask); 
    console.log(task_id); 
}

2. Laravel路由与控制器的错误 #

问题点： #

你试图通过路由参数$id和$newTask获取数据，但实际上参数是通过POST请求体发送的，并非路由占位符，所以控制器拿不到正确的值。

第一步：定义正确的路由 #

在routes/web.php中添加POST路由：

// 方案1：所有参数通过请求体传递
Route::post('/tasks/edit', [YourTaskController::class, 'editTask']);

// 方案2：将task_id放在路由中（更符合RESTful风格）
// Route::post('/tasks/edit/{task_id}', [YourTaskController::class, 'editTask']);

第二步：修正控制器代码 #

使用Request对象来获取请求体中的参数：

use Illuminate\Http\Request;

class YourTaskController extends Controller
{
    // 对应方案1：所有参数从请求体获取
    public function editTask(Request $request){ 
        $taskId = $request->input('task_id');
        $newTask = $request->input('newTask');
        
        // 测试输出
        print_r("Task ID: " . $taskId); 
        print_r("New Task: " . $newTask); 

        // 这里可以添加数据库更新逻辑，比如：
        // \App\Models\Task::where('id', $taskId)->update(['name' => $newTask]);

        // 返回JSON响应（推荐，方便前端处理）
        return response()->json([
            'success' => true,
            'task_id' => $taskId,
            'new_task' => $newTask
        ]);
    }

    // 对应方案2：task_id从路由参数获取，newTask从请求体获取
    // public function editTask(Request $request, $taskId){ 
    //     $newTask = $request->input('newTask');
        
    //     print_r("Task ID: " . $taskId); 
    //     print_r("New Task: " . $newTask); 

    //     return response()->json([
    //         'success' => true,
    //         'task_id' => $taskId,
    //         'new_task' => $newTask
    //     ]);
    // }
}

3. 额外注意事项 #

• 参数编码：使用encodeURIComponent()对参数值编码，避免特殊字符（比如空格、中文）导致的请求错误。
• CSRF令牌：你已经正确设置了X-CSRF-Token请求头，这部分没问题，符合Laravel的要求。
• 路由命名空间：确保控制器的命名空间正确，比如App\Http\Controllers\YourTaskController。

按照上面的修改，你就能正确获取到Ajax传递的字符串变量了。

内容的提问来源于stack exchange，提问作者piyush