ホームページ > バックエンド開発 > PHPチュートリアル > Laravel がフロントエンド Ajax からデータを受け取る共有例

Laravel がフロントエンド Ajax からデータを受け取る共有例

小云云
リリース: 2023-03-19 21:44:02
オリジナル
2768 人が閲覧しました

現在、あるプロジェクトについてメモを取っているところです。vue.js + laravel + mongodb というものです。まず、昨夜のプロジェクトの後で、次のことをまとめておきます。プロジェクト全体で使用されているテクノロジーと私が遭遇した落とし穴、今日はフロントエンドがバックエンドにデータを送信し、laravelがそれを受信する例を記録します。

私はフロントエンドの ajax プラグインに vue-resource を使用しませんでしたが、使用中に落とし穴に遭遇したため、vue-resource よりも使いやすく小さい axios.js を使用しました。

フロントエンド コードを見てみましょう (vue ロジック部分は省略します):


axios.post('index.php/login',{
    email:this.email,
    pass:this.pass
  }).then(function(res){
    console.log(res)
  }).then(function(){
    console.log(321)
  })
ログイン後にコピー

this.email と this.pass は、このメソッドを実行するためにユーザーが入力したフォーム データです (データ形式が正しいことを確認した後)。

Laravel がこれら 2 つの値をどのように受け取るかを見てみましょう:

次の内容を含む GUser.php モデル ファイルを app フォルダーの下に作成します:


<?php
namespace App;
use Mongodb;
use DB;
 
class GUser extends Mongodb {
  public static function login($email) {
 
    $mongo = DB::connection(&#39;mongodb&#39;);
    $res = $mongo->collection(&#39;user&#39;)->where(&#39;email&#39;,$email)->first();
    return $res;
 
  }
}
ログイン後にコピー

次に、app/Http/Controllers の下に GUserController を作成します。 、内容は次のとおりです:


<?php
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\GUser;
use Illuminate\Http\Request;
 
class GUserController extends Controller{
 
  protected function login(Request $request) {
    $email = $request->input(&#39;email&#39;);
    $pass = $request->input(&#39;pass&#39;);
    $res = GUser::login($email);
    return $res;
  }
}
ログイン後にコピー

もちろん、ここではパス値は使用されておらず、ログイン検証ロジックもここでは省略しています。

次にルーティング ファイル web.php で設定します:


Route::any(‘/login&#39;,&#39;GUserController@login&#39;);
ログイン後にコピー

関連する推奨事項:

PHP で AJAX に送信されるデータ型は JSON ですが、これは少し混乱します

以上がLaravel がフロントエンド Ajax からデータを受け取る共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート