Laravel搜索：点击图标走Post路由，回车走Get路由，如何统一走Post？

嘿，这个问题我做项目时也碰到过，其实只要调整下表单结构和JS事件绑定就能轻松搞定，给你两种实用的方案：

方法一：表单包裹法（推荐，简单直接） #

首先把你的搜索输入框和搜索图标按钮放进一个POST表单里，别忘了加上Laravel必须的CSRF令牌（不然POST请求会被拦截哦）：

<form id="search-form" method="POST" action="{{ route('your.search.route') }}">
    @csrf
    <input type="text" id="search-input" name="keyword" placeholder="输入搜索内容...">
    <button type="submit" id="search-btn">
        <!-- 这里放你的搜索图标，比如Font Awesome的图标 -->
        <i class="fa fa-search"></i>
    </button>
</form>

正常情况下，点击按钮会直接提交这个POST表单，回车键默认也会触发表单的POST提交，本来就统一了。但如果你之前给输入框绑了自定义的回车事件（比如触发GET跳转），那得覆盖这个行为，阻止默认的回车动作，然后手动触发表单提交：

document.getElementById('search-input').addEventListener('keydown', function(e) {
    // 监听回车键（keyCode是13）
    if (e.keyCode === 13) {
        // 阻止原来的回车默认行为（比如跳转到GET路由）
        e.preventDefault();
        // 手动触发表单的POST提交
        document.getElementById('search-form').submit();
    }
});

这样不管点图标还是按回车，都会乖乖走POST路由啦。

方法二：全AJAX异步法（适合无刷新搜索场景） #

如果你的搜索是异步无刷新的（不用跳转页面直接显示结果），那可以把搜索逻辑封装成一个函数，让点击和回车都调用这个函数发送POST请求：

先写HTML结构（不用表单也可以，当然用表单也没问题）：

<input type="text" id="search-input" name="keyword" placeholder="输入搜索内容...">
<button id="search-btn">
    <i class="fa fa-search"></i>
</button>
<!-- 用来放搜索结果的容器 -->
<div id="search-results"></div>

然后写JS逻辑，把POST请求的代码封装起来：

// 封装搜索函数，统一发送POST请求
function performSearch() {
    const keyword = document.getElementById('search-input').value.trim();
    if (!keyword) return; // 空内容就不发起请求了

    // 发送POST请求，必须带上CSRF令牌哦
    fetch('{{ route('your.search.route') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: `keyword=${encodeURIComponent(keyword)}`
    })
    .then(response => response.json()) // 这里假设接口返回JSON，根据实际情况调整
    .then(data => {
        // 把搜索结果渲染到页面上
        document.getElementById('search-results').innerHTML = data.html;
    })
    .catch(error => {
        console.error('搜索出问题啦:', error);
    });
}

// 点击搜索图标时触发搜索
document.getElementById('search-btn').addEventListener('click', performSearch);

// 按回车键时触发搜索
document.getElementById('search-input').addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        performSearch();
    }
});

这样两种操作都会调用同一个函数，发送POST请求到你指定的路由。

几个要注意的点 #

• 你的Laravel路由必须定义成POST方法，比如：

  Route::post('/search', [SearchController::class, 'index'])->name('your.search.route');
  

• 不管用哪种方式，CSRF令牌一定要带，不然Laravel会直接拒绝请求，这个是Laravel的安全机制哦。
• 如果用表单方式，按钮的type要设为submit，或者在点击事件里手动调用表单的submit()方法。

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