thinkphp ajax テクノロジー ページを更新せずに簡単に実装

インターネットの発展に伴い、ページ更新不要技術が Web ページ開発のより効率的な方法となり、AJAX (Asynchronous JavaScript and XML) はその実装方法の 1 つです。この記事では、リフレッシュ不要の AJAX テクノロジーを thinkphp に実装する方法を紹介します。

1. AJAX テクノロジの概要

AJAX は、JavaScript および XML テクノロジを使用する非同期通信メソッドであり、ページを更新せずにサーバーとデータをやり取りでき、ユーザー インタラクション エクスペリエンスが向上します。具体的には、AJAX は XMLHttpRequest オブジェクトを通じてサーバーにリクエストを送信し、サーバーがデータを返した後、JavaScript を通じてページのコンテンツを動的に変更することで、ページを更新しなくても効果を実現します。

2. thinkphp フレームワークの基本構造

thinkphp フレームワークでは、まずその基本構造を理解する必要があります。 thinkphp フレームワークの MVC アーキテクチャには、モデル、ビュー、コントローラーの 3 つの部分が含まれています。このうち、Model は主にデータ ロジックの処理を担当し、View はページの表示を担当し、Controller はユーザーのリクエストを処理し、対応する処理のために Model または View を呼び出すことを担当します。

3. AJAX リフレッシュレス テクノロジーを実装する手順

以下では、thinkphp フレームワークで AJAX リフレッシュレス テクノロジーを実装する手順を紹介します:

ステップ 1: コントローラーを作成する

最初に、AJAX リクエストを処理するコントローラーをプロジェクトに作成し、コントローラーでデータ処理とページ表示のための関数を定義する必要があります。

例としてコントローラーの名前として「Demo」を使用する場合、コードは次のとおりです。

<?php namespace app\index\controller;

use think\Controller;

class Demo extends Controller
{
    public function doSomething()
    {
        // 数据处理代码
    }

    public function showSomething()
    {
        // 页面展示代码
    }
}

ステップ 2: AJAX リクエスト コードを記述します

ページ内を使用するには、JavaScript を介して AJAX リクエスト コードを記述し、そのリクエストをコントローラーの処理関数に送信する必要があります。

コードは次のとおりです。

<script>
    function ajaxRequest() {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("content").innerHTML = xhr.responseText;
            }
        };
        xhr.open("GET", "/index/demo/doSomething", true);
        xhr.send();
    }
</script>

上記のコードでは、最初に XMLHttpRequest オブジェクト xhr が作成され、その状態が変化したときにコールバック関数が定義されます。 xhr.readyState が 4 で xhr.status が 200 の場合、AJAX リクエストが成功したことを意味します。このとき、サーバーから返されたデータは JavaScript を通じてページのコンテンツを動的に変更します。 xhr.open() 関数はリクエスト メソッドとリクエスト アドレスを指定するために使用され、xhr.send() 関数はリクエストを処理するためにサーバーに送信するために使用されます。

ステップ 3: リクエストを処理してデータを返す

ユーザーがボタンをクリックするか、特定の操作を実行すると、前の記事で記述した ajaxRequest() 関数がトリガーされ、doSomething が呼び出されます。コントローラーの () 関数はリクエストを処理します。 doSomething() 関数は主に、データ ロジックを処理し、処理結果をフロントエンド ページに返す役割を果たします。

コード例:

public function doSomething()
{
    $data = array("name" => "Apple", "price" => "5.00");
    return json_encode($data);
}

上記のコードでは、製品名と価格を含む配列 $data が最初に定義され、次にデータが json_encode() 関数を通じて JSON 形式に変換され、戻ってきた。

ステップ 4: データの表示

フロントエンド ページでは、データを表示するコードを記述する必要があります。ここでは、コントローラーで showSomething() を呼び出してデータ表示を実装します。

コード例:

public function showSomething()
{
    $this->fetch('example');
}

上記のコードでは、\views ディレクトリに保存された example.html テンプレート ファイルが $this->fetch() 関数によって読み込まれ、表示が実現されます。データの。

4. 概要

この記事では、thinkphp フレームワークで AJAX リフレッシュレス テクノロジを実装する方法を簡単に紹介します。 Controller、View、JavaScriptを操作することで、更新することなく簡単にページインタラクション効果を実現でき、Webページの表示効率やユーザーインタラクティブ性が向上します。

以上がthinkphp ajax テクノロジー ページを更新せずに簡単に実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。