定義路由和控制器處理AJAX請求，2. 在Blade模板中添加CSRF令牌元標(biāo)簽，3. 使用jQuery發(fā)送攜帶CSRF令牌的POST請求并處理響應(yīng)，4. 在Laravel中返回JSON格式響應(yīng)并妥善處理驗證錯誤，5. 推薦使用axios替代jQuery以獲得更好的現(xiàn)代JavaScript支持，整個流程確保了AJAX請求的安全性與可靠性，且每一步均需正確實施以保障功能完整。

Handling AJAX requests in Laravel with jQuery is a common task when building dynamic, responsive web applications. Laravel makes it easy to manage these requests thanks to its built-in CSRF protection, routing, and JSON response support. Here’s how to do it properly and securely.

? 1. Set Up Your Route and Controller

First, define a route in routes/web.php that will handle the AJAX request.

// routes/web.php
use Illuminate\Http\Request;
use App\Http\Controllers\AjaxController;

Route::post('/save-data', [AjaxController::class, 'saveData']);

Then create the controller:

// app/Http/Controllers/AjaxController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AjaxController extends Controller
{
    public function saveData(Request $request)
    {
        // Validate the request
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email',
        ]);

        // Process data (e.g., save to DB)
        // User::create($request->all());

        return response()->json([
            'status' => 'success',
            'message' => 'Data saved successfully!'
        ]);
    }
}

? 2. Include CSRF Token in Your Blade Template

Laravel requires CSRF protection for POST requests. You must pass the CSRF token with your AJAX request.

In your Blade file, add:

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

This lets jQuery access the token via $('meta[name="csrf-token"]').attr('content').

? 3. Write jQuery AJAX Code

Now use jQuery to send the AJAX request. Make sure to include jQuery and place this script in your Blade template or external JS file.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$('#saveBtn').on('click', function () {
    $.ajax({
        url: '/save-data',
        method: 'POST',
        data: {
            name: $('#name').val(),
            email: $('#email').val()
        },
        success: function (response) {
            alert(response.message);
            console.log(response);
        },
        error: function (xhr) {
            if (xhr.status === 422) {
                // Validation errors
                let errors = xhr.responseJSON.errors;
                $.each(errors, function (field, messages) {
                    alert(messages[0]); // Show first error
                });
            } else {
                alert('An error occurred.');
            }
        }
    });
});
</script>

And your form:

<form>
    <input type="text" id="name" placeholder="Name">
    <input type="email" id="email" placeholder="Email">
    <button type="button" id="saveBtn">Save</button>
</form>

? 4. Handle JSON Responses and Errors

• Use response()->json() in Laravel to return structured responses.
• In jQuery, check for validation errors (HTTP 422) and other status codes.
• Always validate input on the server side — don’t rely on client-side validation.

? Tips & Best Practices

• Use @csrf or meta token: Both work, but meta token is cleaner for AJAX.
• Use $.ajaxSetup() to set headers globally so you don’t repeat CSRF in every request.
• Return meaningful JSON: Include status, message, and data keys for consistency.
• Avoid exposing sensitive data in responses.
• Test with DevTools: Check Network tab to verify request payload and response.

? Optional: Use Axios Instead of jQuery

While jQuery works fine, consider using Axios for modern apps:

axios.post('/save-data', {
    name: 'John',
    email: 'john@example.com'
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error.response.data);
});

Axios automatically handles JSON and can be configured with CSRF via interceptors.

That’s it! You can now securely send and handle AJAX requests in Laravel using jQuery. Just remember: validate on the backend, include the CSRF token, and structure your responses clearly.

以上是如何與JQuery一起處理Laravel的Ajax請求？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！