PHP+Laravelの簡単応用チュートリアル【ajaxの使い方】-Laravel-php.cn

PHP+Laravelの簡単応用チュートリアル【ajaxの使い方】

藏色散人

リリース： 2020-12-16 14:27:19

転載

2408 人が閲覧しました

以下は、Laravel Frameworkチュートリアル欄に掲載されているPHP Laravelの簡単な応用チュートリアル【ajaxの使い方】です。！

#ステートメント

この記事は単なる分散アプリケーションのチュートリアルです。デフォルトの Laravel プロジェクトはインストールされ、正常に実行されています。

Ajax の使用

コントローラーの作成

プロジェクトルートディレクトリでコマンドを実行します

php artisan make:controller TestController

ログイン後にコピー

作成が成功すると、プロンプトが表示されます

コントローラーが正常に作成されました。作成が成功すると、
TestController.php ファイルが app/Http/Controllers/ ディレクトリに生成されます。 TestController.php
ファイル <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">public function index(){ return view('test');}public function testAjax(){ echo '请求成功了';die;}</pre><div class="contentsignin">ログイン後にコピー</div></div>

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');

ログイン後にコピー

ルーティング関連の詳細については、次を参照してください。ドキュメントルーティング「Laravel 8 中国語ドキュメント」を確認してください (アドレス: https://learnku.com/docs /laravel/8.x/routing/9365)

追加テストページへの入り口

Openresources/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 的使用

ダウンロードした

jquery.min.js を public/assets/## に配置します。 # ディレクトリ

# の内容を変更します。 ##resources/views/test.blade.php file

<!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>

ログイン後にコピー

テストページの ## をクリックします #Submit PHP + Laravel 的简单应用教程 — ajax 的使用

testAjax() によって返されたコンテンツが確認できます。コントローラの

がページに表示されました

リクエストインターフェイスの内容を変更しますコントローラー PHP + Laravel 的简单应用教程 — ajax 的使用 #ファイルパス

app/Http/Controllers/TestController.php

元のコンテンツ PHP + Laravel 的简单应用教程 — ajax 的使用

変更されたコンテンツ:

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 的使用