js が thinkphp5 データと対話する方法-ThinkPHP-php.cn

js が thinkphp5 データと対話する方法

WBOY

リリース： 2023-05-28 22:24:36

オリジナル

1285 人が閲覧しました

近年、フロントエンド技術の急速な発展により、フロントエンドとバックエンドを分離する開発モデルの可能性が高まりました。開発においては、フロントエンド開発言語としてよく使われるJavaScript（略してJS）もフロントエンド開発には欠かせないものとなっています。この場合、JS がバックエンドフレームワーク php5 (略して TP5) とどのように対話するかが、開発者が懸念する問題の 1 つとなっています。この記事では、JSとtp5のデータ連携方法をいくつかの側面から詳しく紹介します。

1. フロントエンドとバックエンドのデータ対話方法

フロントエンドとバックエンドのデータ対話には、通常、同期と非同期の 2 つの方法があります。同期メソッドは、フロントエンドがリクエストを送信した後、応答する前にバックエンドがデータを返すのを待つ必要があることを意味しますが、非同期メソッドは待つ必要がありません。フロントエンドがリクエストを開始した後は、続行できます。下向きに実行し、バックエンドデータが返されるのを待ってから処理します。

実際の開発では、遅延などの欠点があるため、同期方法はますます使用されなくなりました。非同期方式は、フロントエンドとバックエンドのデータ対話の主要な方式となっています。以下の説明では、主に非同期モードで JS と tp5 データの間で対話する方法について説明します。

2. ajax を使用して非同期通信を実現する

非同期通信では、ajax を使用してフロントエンドとバックエンドのデータ通信を実現することが中心となります。 Ajaxとは、Asynchronous JavaScript and XML（非同期JavaScriptとXML）の略で、JavaScriptを利用した非同期通信技術です。ページ全体をリロードしなくても、ページの一部を更新できます。

ajax を使用する場合、フロントエンド部分に JS コードを記述し、バックエンド部分に tp5 コードを記述する必要があります。フロントエンドが ajax リクエストを送信すると、バックエンドはリクエストを受信した後に Json データ (XML 形式のデータである場合もあります) を返します。データが返された後、フロントエンド JS によって処理されます。

以下では実際の開発事例をもとに、JSとtp5間の非同期対話の具体的な実装を詳しく紹介します。

ステップ 1: フロントエンドでフロントエンドコードを作成する

まず、フロントエンドでユーザー権限を設定するページを作成します。このページでは、アクセス許可の追加と削除という 2 つの操作を実装する必要があります。ここでは、「追加」操作を例として説明します。

まず、ページにボタンを作成する必要があります。ボタンをクリックすると、権限情報を入力するフォームが表示されます。同時に、権限情報を便利に表示するには、すべての権限情報を表示するテーブルをページに記述する必要があります。

次の JS コードを使用して、権限情報を表示する HTML テーブルを生成します。

function getAuthorityTable() {
    $.ajax({
        type: "GET",
        url: "/index/getAuthorityTable",
        dataType: "json",
        success: function (data) {
            var table = "<table><thead><tr><th>权限编号</th><th>权限名</th><th>操作</th></thead><tbody>";
            for (var i = 0; i < data.length; i++) {
                table += "<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["authority_name"] + "</td><td><button onclick='deleteAuthority(" + data[i]["id"] + ")'>删除</button></td></tr>";
            }
            table += "</tbody></table>";
            $("#authorityTable").html(table);
        }
    });
}

ログイン後にコピー

ここでは、ajax を使用してバックエンドデータを非同期的に取得し、権限番号、権限名、削除操作の 3 つの部分で構成される HTML テーブルを生成します。このうち、getAuthorityTable() メソッドは、フロントエンドリクエスト URL を定義し、リクエスト結果からページに表示する HTML テーブルを生成します。

ステップ 2: バックエンドで tp5 コードを作成する

URL リクエストに応答するメソッドをサーバー側で作成する必要があります。 tp5 では、コントローラーとモデルを使用して実装できます。

たとえば、コントローラーのインデックスコントローラーに setAuthority メソッドを追加できます:

public function setAuthority()
{
    $authority_name = input('post.authority_name');
    $model = new Authority();
    if ($model -> add_authority($authority_name)) {
        $this -> success('添加权限成功!');
    } else {
        $this -> error('添加权限失败！');
    }
}

ログイン後にコピー

上記のコードでは、入力メソッドを使用して POST パラメーターを受け取り、権限モデルクラス権限情報を追加します。最後に、tp5 の組み込み $this->success メソッドと $this->error メソッドを使用してステータス情報を返し、フロントエンドに操作の成功または失敗を通知します。

ステップ 3: JS を使用してフロントエンドでリクエストを送信する

フロントエンドの JS コードに実装する必要があります。ボタンをクリックした後、バックエンドにリクエストを送信して取得します。バックエンドから返された応答。

権限の追加操作を例として、この操作をボタンのクリックイベントに実装します。

function addAuthority() {
    var authority_name = $("#authorityName").val();
    $.ajax({
        type: "POST",
        url: "/index/setAuthority",
        dataType: "json",
        data: {authority_name: authority_name},
        success: function (data) {
            alert(data.msg);
        }
    });
}

ログイン後にコピー

上記のコードでは、POST メソッドを使用してサーバーにリクエストを送信し、パラメーターとして「authority_name」を SetAuthority コントローラーに送信します。次に、data.msg を使用して動作ステータス情報を返します。

3. その他の注意事項

上記以外にも注意が必要な点がいくつかあります:

1. クロスドメインリクエスト: ajax リクエストは非同期、ドメイン名それぞれフロントエンド、バックエンドですが、セキュリティ確保のため、フロントエンドJSとバックエンドサーバーは同じドメイン名ではありません。現時点では、クロスドメインリクエストの問題の解決を検討する必要があります。一般的なソリューションには、JSONP の使用、バックエンドへのヘッダーの追加などが含まれます。

2.CSRF 攻撃: Ajax の非同期リクエストはクロスサイトリクエストフォージェリ (CSRF) のセキュリティ問題を引き起こす可能性があるため、tp5 は独自の方法を使用して CSRF 攻撃を防止しています。この方法は thinkconfig.php ファイルで変更できます。開発中の関連パラメータ。

3. フロントエンドとバックエンドの相互作用の検証: システムのセキュリティを確保するために、フロントエンドとバックエンドのデータ相互作用プロセス中に検証が必要です。関連する操作を実行するクラス。

4.JSON データ処理: JSON 形式のデータは非同期 Ajax リクエスト中に処理する必要があるため、フロントエンド JS は多くの場合、Json.stringify、JSON.parse、およびその他のメソッドを使用して関連する操作を実行します。

つまり、JS と tp5 間のデータのやり取りは、ajax の非同期通信方式に基づいて実装されています。 JSとtp5の通信方法を理解し、対応するツールや手法を習得すれば、より効率的にWebサイト開発を完了することができます。同時に、開発プロセス中に、セキュリティと検証の問題についても考慮する必要があります。この記事が読者のお役に立てば幸いです。

以上がjs が thinkphp5 データと対話する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。