Ajax要求を処理するルートとコントローラーを定義します。2。ブレードテンプレートにCSRFトークンメタタグを追加します。3。プロセス全體により、AJAX要求のセキュリティと信頼性が保証され、完全な機能を確保するために各ステップを正しく実裝する必要があります。

Jqueryを使用してLaravelでAjax要求を処理することは、動的で応答性の高いWebアプリケーションを構築する際の一般的なタスクです。 Laravelは、CSRF保護、ルーティング、JSON応答サポートの組み込みにより、これらのリクエストを簡単に管理できます。適切かつ安全に行う方法は次のとおりです。

?1。ルートとコントローラーをセットアップします

まず、AJAXリクエストを処理するroutes/web.phpのルートを定義します。

 //ルート/web.php
Illuminate \ http \ requestを使用します。
app \ http \ controllers \ ajaxcontrollerを使用します。

ルート:: post（ '/save-data'、[ajaxcontroller :: class、 'savedata']）;

次に、コントローラーを作成します。

 // app/http/controllers/ajaxcontroller.php
namespace app \ http \ controllers;

Illuminate \ http \ requestを使用します。

クラスAjaxControllerはコントローラーを拡張します
{
    パブリック関數(shù)savedata（リクエスト$ request）
    {
        //リクエストを検証します
        $ request-> validate（[[
            'name' => '必須|文字列|マックス：255'、
            「電子メール」=> '必須|メール'、
        ]）;

        //データを処理する（例えば、DBに保存）
        // user :: create（$ request-> all（））;

        return Response（） - > json（[
            「ステータス」=>「成功」、
            「メッセージ」=> 'データが正常に保存されました！」
        ]）;
    }
}

?2。ブレードテンプレートにCSRFトークンを含めます

Laravelは、POSTリクエストのためにCSRF保護を必要とします。 AJAXリクエストでCSRFトークンを渡す必要があります。

ブレードファイルに追加してください：

 <meta name = "csrf-token" content = "{{csrf_token（）}}">

これにより、jQueryは$('meta[name="csrf-token"]').attr('content')を介してトークンにアクセスできます。

?3。jQuery ajaxコードを書きます

JQueryを使用してAjaxリクエストを送信します。 jqueryを含めて、このスクリプトをブレードテンプレートまたは外部JSファイルに配置してください。

 <スクリプトsrc = "https://code.jquery.com/jquery-3.6.0.min.js"> </script>
<スクリプト>
$ .ajaxsetup（{
    ヘッダー：{
        &#39;x-csrf-token&#39;：$（ &#39;meta [name = "csrf-token"]&#39;）。attr（ &#39;content&#39;）
    }
}）;

$（ &#39;＃savebtn&#39;）。on（ &#39;click&#39;、function（）{{
    $ .ajax（{
        url： &#39;/save-data&#39;、
        方法：「投稿」、
        データ： {
            名前：$（ &#39;＃name&#39;）。val（）、
            電子メール：$（ &#39;＃email&#39;）。val（）
        }、
        成功：関數(shù)（応答）{
            アラート（response.message）;
            console.log（response）;
        }、
        エラー：function（xhr）{
            if（xhr.status === 422）{
                //検証エラー
                let errors = xhr.responsejson.errors;
                $ .each（error、function（field、messages）{
                    アラート（メッセージ[0]）; //最初のエラーを表示します
                }）;
            } それ以外 {
                アラート（ &#39;エラーが発生しました。&#39;）;
            }
        }
    }）;
}）;
</script>

そしてあなたのフォーム：

 <form>
    <input type = "text" id = "name" placeholder = "name">
    <入力型= "email" id = "email" placeholder = "email">
    <button type = "button" id = "savebtn"> save </button>
</form>

?4。JSONの応答とエラーを処理します

• laravelでresponse()->json()使用して、構造化された応答を返します。
• jQueryでは、検証エラー（HTTP 422）およびその他のステータスコードを確認してください。
• サーバー側の入力を常に検証します。クライアント側の検証に依存しないでください。

?ヒントとベストプラクティス

• @csrfまたはメタトークンを使用します。両方とも作業(yè)ですが、メタトークンはAJAXのクリーンです。
• $.ajaxSetup()を使用してグローバルにヘッダーを設定して、すべてのリクエストでCSRFを繰り返さないようにします。
• 意味のあるJSONを返します：一貫性のためにstatus 、 message 、およびdataキーを含めます。
• 応答に敏感なデータを公開しないでください。
• DevToolsでテスト：ネットワークタブをチェックして、リクエストのペイロードと応答を確認します。

optionalオプション：jQueryの代わりにaxiosを使用します

jQueryは正常に動作しますが、最新のアプリにAxiosを使用することを検討してください。

 axios.post（ '/save-data'、{
    名前：「ジョン」、
    メール：「john@example.com」
}）
.then（response => {
    console.log（response.data）;
}）
.catch（error => {
    console.error（error.response.data）;
}）;

AxiosはJSONを自動的に処理し、インターセプターを介してCSRFで構成できます。

それでおしまい！ JQueryを使用して、LaravelでAjaxリクエストを安全に送信および処理できるようになりました。覚えておいてください：バックエンドで検証し、CSRFトークンを含め、応答を明確に構成します。

以上がjqueryでlaravelでajaxリクエストを処理する方法は？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。