下面由laravel框架教程欄目給大家介紹PHP+Laravel的簡單應用教程【ajax的使用】，希望對需要的朋友有所幫助！
聲明
本文只是零散的應用教程，默認 laravel 項目已經安裝完成，并正常運行；
Ajax 的使用
創建控制器
在項目根目錄下運行命令
php artisan make:controller TestController
創建成功會提示 Controller created successfully.
創建成功后會在 app/Http/Controllers/ 目錄下生成 TestController.php 文件
在 TestController.php 文件中加入
public function index(){ return view('test');}public function testAjax(){ echo '請求成功了';die;}
創建視圖文件
在 resources/views 目錄中新建一個視圖文件 test.blade.php
立即學習“PHP免費學習筆記（深入）”；
文件中的內容如下
路由配置
打開路由文件 routes/web.php ，默認路由如下：
下方新增一條展示測試 Ajax 頁面的路由
Route::get('test', [TestController::class, 'index'])->name('test.index');
新增一條接收 Ajax 請求的路由
Route::post('test', [TestController::class, 'testAjax'])->name('test.ajax');
更多路由相關內容請查看文檔 路由《Laravel 8 中文文檔》（地址：https://learnku.com/docs/laravel/8.x/routing/9365）
增加進入測試頁面的入口
打開 resources/views/welcome.blade.php 文件，找到大概 111 行的位置：
復制內容，修改為需要的測試頁面入口
<a href="{{route('test.index')}}" class="ml-1 underline"> 測試入口</a>
保存后刷新頁面，就能看到測試入口了
點擊測試入口，進入測試頁面，會看到以下內容
修改頁面內容
將下載好的 jquery.min.js 放入 public/assets/ 目錄下
修改 resources/views/test.blade.php 文件的內容
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Test Ajax</title> <script src="{{asset('assets/jquery.min.js')}}"></script></head><body> 返回的內容:<p style="color: red" class="response-message"></p> <form method="post" action="{{route('test.ajax')}}"> {!! csrf_field() !!} 提交的內容：<input type="text" name="text"> <span class="submit-btn">提交</span> </form></body><script> $('.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); }) })</script></html>
點擊測試頁面的 提交 可以看到控制器中 testAjax() 返回的內容已經顯示在頁面上
修改控制器中接收請求接口的內容
文件路徑 app/Http/Controllers/TestController.php 原內容
修改后的內容：
修改前端頁面
文件路徑 resources/views/test.blade.php
$('.submit-btn').click(function () { let url = $(this).closest('form').attr('action'); let formData = $(this).closest('form').serialize(); $.post(url,formData,function (response) { let responseData = response.data; let appendStr = '<span style="border: 1px solid blue">'+responseData.text+'</span>'; $('.response-message').empty().append(appendStr); })})
保存后在頁面輸入框中輸入內容，點擊提交后即可看到最新內容
結語
本文講的是基礎的接口應用，還有比如 Vue、Recat、mui 等項目中請求接口的示例請自行了解? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
