如何使用laravel在点击按钮时点击api

use Illuminate\Support\Facades\Route;

Route::post('/button-click', 'ButtonController@clickEvent');

php artisan make:controller ButtonController

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class ButtonController extends Controller
{
    public function clickEvent(Request $request)
    {
        // 处理按钮点击事件的逻辑
        $response = Http::post('https://api.example.com/endpoint', [
            'param1' => $request->input('param1'),
            'param2' => $request->input('param2'),
        ]);

        // 处理 API 响应
        if ($response->successful()) {
            // API 请求成功
            return response()->json(['message' => 'API 请求成功']);
        } else {
            // API 请求失败
            return response()->json(['message' => 'API 请求失败'], $response->status());
        }
    }
}

<button id="clickButton">点击按钮</button>

<script>
    document.getElementById('clickButton').addEventListener('click', function() {
        // 发送按钮点击事件的请求
        fetch('/button-click', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                param1: 'value1',
                param2: 'value2'
            })
        })
        .then(response => response.json())
        .then(data => {
            // 处理响应结果
            console.log(data);
        })
        .catch(error => {
            // 处理请求错误
            console.error(error);
        });
    });
</script>