Laravel-ajax

提供:Dev Guides
移動先:案内検索

ララヴェル-アヤックス

  • Ajax(非同期JavaScriptおよびXML)*は、非同期Webアプリケーションを作成するためにクライアント側で使用される多くのWebテクノロジーを利用するWeb開発手法のセットです。 ビューファイルにjqueryライブラリをインポートして、サーバーからajaxを使用してデータを送受信するために使用されるjqueryのajax関数を使用します。 サーバー側では、response()関数を使用してクライアントに応答を送信し、JSON形式で応答を送信することができます。応答関数をjson()関数でチェーンできます。

json()関数の構文

json(string|array $data = array(), int $status = 200, array $headers = array(), int $options)

ステップ1 *- *resources/views/message.php というビューファイルを作成し、そのファイルに次のコードをコピーします。

<html>
   <head>
      <title>Ajax Example</title>

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script>
         function getMessage() {
            $.ajax({
               type:'POST',
               url:'/getmsg',
               data:'_token = <?php echo csrf_token() ?>',
               success:function(data) {
                  $("#msg")l(data.msg);
               }
            });
         }
      </script>
   </head>

   <body>
      <div id = 'msg'>This message will be replaced using Ajax.
         Click the button to replace the message.</div>
      <?php
         echo Form::button('Replace Message',['onClick'=>'getMessage()']);
      ?>
   </body>

</html>

ステップ2 *-次のコマンドを実行して、 *AjaxController というコントローラーを作成します。

php artisan make:controller AjaxController --plain
  • ステップ3 *-実行が成功すると、次の出力が表示されます-

AjaxController

  • ステップ4 *-次のコードをコピーします
*app/Http/Controllers/AjaxController.php* ファイル。
*app/Http/Controllers/AjaxController.php*
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class AjaxController extends Controller {
   public function index() {
      $msg = "This is a simple message.";
      return response()->json(array('msg'=> $msg), 200);
   }
}

ステップ5 *- *app/Http/routes.php に次の行を追加します。

*app/Http/routes.php*
Route::get('ajax',function() {
   return view('message');
});
Route::post('/getmsg','AjaxController@index');
  • ステップ6 *-次のURLにアクセスして、Ajax機能をテストします。
http://localhost:8000/ajax
  • ステップ7 *-次の画像に示すように、メッセージが表示されるページにリダイレクトされます。

メッセージの置換

  • ステップ8 *-ボタンをクリックすると、次の画像のように出力が表示されます。

シンプルなメッセージ