Using Ajax in Laravel: Controller, View, and Route Setup

This article provides a step‑by‑step tutorial on using Ajax in a Laravel project that is already installed and running.

Creating the controller : Run php artisan make:controller TestController in the project root. Laravel creates app/Http/Controllers/TestController.php . Add two methods:

<code>public function index(){
    return view('test');
}
public function testAjax(){
    echo '请求成功了';
    die;
}</code>

Creating the view file : In resources/views create test.blade.php .

Route configuration : Edit routes/web.php and add the following routes:

<code>Route::get('test', [TestController::class, 'index'])->name('test.index');
Route::post('test', [TestController::class, 'testAjax'])->name('test.ajax');</code>

Adding an entry link : Open resources/views/welcome.blade.php (around line 111) and insert the link:

<code>&lt;a href="{{route('test.index')}}" class="ml-1 underline"&gt;测试入口&lt;/a&gt;</code>

Including jQuery : Place jquery.min.js into public/assets and reference it in the test view.

Front‑end page code (test.blade.php):

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Test Ajax&lt;/title&gt;
    &lt;script src="{{asset('assets/jquery.min.js')}}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class="response-message" style="color: red"&gt;&lt;/p&gt;
    &lt;form method="post" action="{{route('test.ajax')}}"&gt;
        {!! csrf_field() !!}
        提交的内容：&lt;input type="text" name="text"&gt;
        &lt;span class="submit-btn"&gt;提交&lt;/span&gt;
    &lt;/form&gt;
    &lt;script&gt;
        $('.submit-btn').click(function(){
            let url = $(this).closest('form').attr('action');
            let formData = $(this).closest('form').serialize();
            $.post(url, formData, function(response){
                $('.response-message').text(response);
            });
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code>

After saving, open the test page, enter text, and click the submit button; the response from TestController@testAjax will be displayed.

Modifying the controller for JSON response : Change testAjax() to return a JSON object, e.g., return response()->json(['data'=>['text'=>'Your message']]); , and update the front‑end script to extract response.data.text and insert it into the page.

Finally, the article notes that this covers basic Ajax usage in Laravel, and readers can explore similar implementations in Vue, React, or other front‑end frameworks.