Laravel - Ajax

  • 简述

    Ajax (Asynchronous JavaScript and XML)是一组 Web 开发技术,利用客户端使用的许多 Web 技术来创建异步 Web 应用程序。在视图文件中导入 jquery 库以使用 jquery 的 ajax 函数,该函数将用于使用 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").html(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− 成功执行后,您将收到以下输出 −
    Ajax控制器
    步骤 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− 单击按钮后,输出将如下图所示。
    简单的消息