如何使用JavaScript调用路由并传递数据？Laravel 5开发问询

嘿，我来帮你搞定这个需求！咱们一步步来，从配置到代码实现都给你讲清楚：

1. 先搞定CSRF令牌的配置 #

Laravel对POST请求有CSRF保护要求，首先确保你的页面<head>里已经包含这个meta标签（Laravel默认模板一般自带，如果没有就加上）：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后补全你JS里的$.ajaxSetup，全局设置CSRF请求头：

$(document).ready(function(){
    // 全局配置CSRF令牌，避免每个请求都重复写
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $("#btn-post").click(function(e){
        // 阻止a标签默认的跳转行为，不然AJAX请求可能被中断
        e.preventDefault();

2. 定义Laravel后端路由 #

在routes/web.php里创建一个POST路由，用来接收前端传递的数据，建议用命名路由，后续修改路径更方便：

// 命名路由：post.submit，对应PostController的store方法
Route::post('/submit-post', 'PostController@store')->name('post.submit');

然后在app/Http/Controllers/PostController.php里编写store方法，处理请求：

use Illuminate\Http\Request;

public function store(Request $request)
{
    // 先验证数据合法性
    $request->validate([
        'content' => 'required|string|max:255'
    ]);

    // 这里写你的业务逻辑，比如把内容保存到数据库
    // \App\Models\Post::create(['content' => $request->content]);

    // 给前端返回成功响应
    return response()->json([
        'success' => true,
        'message' => '发布成功啦！'
    ]);
}

3. 在JS中调用路由并传递数据 #

回到按钮的点击事件里，获取textarea的内容，通过AJAX发送请求：

// 获取输入框的内容，先去掉首尾空格
        let postContent = $("#comment").val().trim();
        
        // 简单验证：内容不能为空
        if(postContent === ''){
            alert('请输入要发布的内容哦');
            return;
        }

        // 发送AJAX请求
        $.ajax({
            url: "{{ route('post.submit') }}", // 用命名路由生成URL，不用硬写路径
            method: 'POST',
            data: {
                content: postContent // 传递的参数，键名要和后端接收的一致
            },
            success: function(response){
                // 请求成功后的处理：提示用户、清空输入框等
                console.log(response);
                alert(response.message);
                $("#comment").val('');
                // 如果你的按钮是用来打开模态框的，这里可以关闭模态框
                $('#addPost').modal('hide');
            },
            error: function(xhr){
                // 请求失败的处理：打印错误信息、提示用户
                console.error('请求出错：', xhr.responseText);
                alert('发布失败，请稍后重试');
            }
        });
    });
});

额外小提示 #

• 如果你的JS代码是放在外部独立文件里（不是写在Blade模板内），不能直接用Blade的{{ route() }}语法，这时候可以在HTML里加个隐藏元素存路由URL：

  <input type="hidden" id="post-submit-url" value="{{ route('post.submit') }}">
  

  然后在JS里这样获取：

  url: $('#post-submit-url').val()
  

• 你的按钮目前带有data-toggle="modal"属性，如果你是想点击按钮直接提交数据（不是打开模态框），可以移除这个属性；如果是模态框内的提交按钮，记得把点击事件绑定到模态框的提交按钮上哦。

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