Laravel Ajax


Ajax(Asynchronous JavaScript and XML)是一组 Web 开发技术,利用客户端使用的许多 Web 技术来创建异步 Web 应用程序。可以在视图文件中导入 jquery 库以使用 jquery 的 ajax 函数,这些函数使用 ajax 从服务器发送和接收数据。在服务端,你可以使用 response() 函数向客户端发送响应并以 JSON 格式发送响应,你可以将 response() 函数与 json() 函数配套起来使用。

json() 函数语法


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

步骤1: 创建一个名为resources/views/message.php的视图文件,并将以下代码复制到该文件中

<html>
    <head>
        <title>Ajax 例子</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: 执行成功后,会得到如下输出:

AjaxController

步骤4: 将以下代码复制到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: 修改application/config/routes.php文件,并在文件末尾添加以下配置:

Route::get('ajax',function() {
    return view('message');
});
Route::post('/getmsg','AjaxController@index');

步骤6:访问以下网址测试Ajax功能:

http://localhost:8000/ajax

步骤7: 你将被重定向到一个页面,并在其中看到一条消息,如下图所示:

Replace Message

步骤8: 点击按钮后输出如下图所示:

Simple Message