首頁 > php框架 > Laravel > PHP+Laravel的簡單應用教學【ajax的使用】

PHP+Laravel的簡單應用教學【ajax的使用】

藏色散人
發布: 2020-12-16 14:27:19
轉載
2435 人瀏覽過

宣告本文只是零散的應用教學,預設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;}
登入後複製

#建立視圖檔案

PHP + Laravel 的简单应用教程 — ajax 的使用#在

resources/views

目錄中新建一個檢視檔 test.blade.php

檔案中的內容如下

PHP + Laravel 的简单应用教程 — ajax 的使用

路由設定

PHP + Laravel 的简单应用教程 — ajax 的使用開啟路由檔案

routes/web.php

,預設路由如下:

#下方新增一顯示測試Ajax 頁面的路由

Route::get('test', [TestController::class, 'index'])->name('test.index');
登入後複製
新增一條接收Ajax 請求的路由

Route::post('test', [TestController::class, 'testAjax'])->name('test.ajax');
登入後複製
PHP + Laravel 的简单应用教程 — ajax 的使用更多路由相關內容請查看文件路由《Laravel 8 中文文件》(網址:https://learnku.com/docs /laravel/8.x/routing/9365)

#增加進入測試頁面的入口

開啟
resources/views/welcome.blade. php

文件,找到大概111 行的位置:

#複製內容,修改為需要的測試頁面入口

<a href="{{route(&#39;test.index&#39;)}}" class="ml-1 underline">
    测试入口</a>
登入後複製

PHP + Laravel 的简单应用教程 — ajax 的使用

儲存後重新整理頁面,就能看到測試入口了

PHP + Laravel 的简单应用教程 — ajax 的使用

點擊測試入口,進入測試頁面,會看到以下內容

PHP + Laravel 的简单应用教程 — ajax 的使用

修改頁面內容

PHP + Laravel 的简单应用教程 — ajax 的使用將下載好的

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(&#39;assets/jquery.min.js&#39;)}}"></script></head><body>
    返回的内容:<p style="color: red" class="response-message"></p>
    <form method="post" action="{{route(&#39;test.ajax&#39;)}}">
        {!! 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>
登入後複製
PHP + Laravel 的简单应用教程 — ajax 的使用點擊測試頁面的提交

可以看到控制器中testAjax() 傳回的內容已經顯示在頁面上

PHP + Laravel 的简单应用教程 — ajax 的使用##修改控制器中接收請求介面的內容

檔案路徑PHP + Laravel 的简单应用教程 — ajax 的使用app/Http/Controllers/TestController.php

原始內容

#修改後的內容:

PHP + Laravel 的简单应用教程 — ajax 的使用

修改前端页面

文件路径 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);
        })})
登入後複製

保存后在页面输入框中输入内容,点击提交后即可看到最新内容

PHP + Laravel 的简单应用教程 — ajax 的使用

结语

本文讲的是基础的接口应用,还有比如 Vue、Recat、mui 等项目中请求接口的示例请自行了解                                             

以上是PHP+Laravel的簡單應用教學【ajax的使用】的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:learnku.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板