Ajax (Asynchronous JavaScript and XML) là một nhóm các kĩ thuật phát triển website sử dụng trên nhiều công nghệ web được sử dụng ở phía khách hàng để tạo các ứng dụng web không đồng bộ (nếu học PHP thì bạn đã biết về Ajax rồi). Import các thư viện jquery vào trong file view để sử dụng các chức năng ajax của jquery mà sẽ được dùng để gửi và nhận dữ liệu bằng ajax từ máy chủ. Về phía máy chủ bạn có thể dùng chức năng response() để gửi phản hồi tới khách hàng và để gửi phản hồi trong định dạng JSON, bạn có thể kết hợp chức năng phản hồi với chức năng json().
>>> Xem full Series về Laravel Framework <<<
Cú pháp chức năng json()
|
1
|
json(string|array $data = array(), int $status = 200, array $headers = array(), int $options)
|
Ví dụ
Bước 1 – Tạo một file view gọi là resources/views/message.php và sao chép code sau vào file đó:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<span class=“tag”><html></span>
<span class=“tag”><head></span>
<span class=“tag”><title></span><span class=“pln”>Ajax Example</span><span class=“tag”></title></span>
<span class=“tag”><script</span> <span class=“atn”>src</span> <span class=“pun”>=</span> <span class=“atv”>“https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”</span><span class=“tag”>></span>
<span class=“tag”></script></span>
<span class=“tag”><script></span>
<span class=“kwd”>function</span><span class=“pln”> getMessage</span><span class=“pun”>(){</span><span class=“pln”>
$</span><span class=“pun”>.</span><span class=“pln”>ajax</span><span class=“pun”>({</span><span class=“pln”>
type</span><span class=“pun”>:</span><span class=“str”>‘POST’</span><span class=“pun”>,</span><span class=“pln”>
url</span><span class=“pun”>:</span><span class=“str”>‘/getmsg’</span><span class=“pun”>,</span><span class=“pln”>
data</span><span class=“pun”>:</span><span class=“str”>‘_token = <?php echo csrf_token() ?>’</span><span class=“pun”>,</span><span class=“pln”>
success</span><span class=“pun”>:</span><span class=“kwd”>function</span><span class=“pun”>(</span><span class=“pln”>data</span><span class=“pun”>){</span><span class=“pln”>
$</span><span class=“pun”>(</span><span class=“str”>“#msg”</span><span class=“pun”>).</span><span class=“pln”>html</span><span class=“pun”>(</span><span class=“pln”>data</span><span class=“pun”>.</span><span class=“pln”>msg</span><span class=“pun”>);</span>
<span class=“pun”>}</span>
<span class=“pun”>});</span>
<span class=“pun”>}</span>
<span class=“tag”></script></span>
<span class=“tag”></head></span>
<span class=“tag”><body></span>
<span class=“tag”><div</span> <span class=“atn”>id</span> <span class=“pun”>=</span> <span class=“atv”>‘msg’</span><span class=“tag”>></span><span class=“pln”>This message will be replaced using Ajax.
Click the button to replace the message.</span><span class=“tag”></div></span>
<span class=“pun”><?</span><span class=“pln”>php
echo </span><span class=“typ”>Form</span><span class=“pun”>::</span><span class=“pln”>button</span><span class=“pun”>(</span><span class=“str”>‘Replace Message’</span><span class=“pun”>,[</span><span class=“str”>‘onClick’</span><span class=“pun”>=></span><span class=“str”>‘getMessage()’</span><span class=“pun”>]);</span>
<span class=“pun”>?></span>
<span class=“tag”></body></span>
<span class=“tag”></html></span>
|
Bước 2 – Tạo một controller gọi là AjaxController bằng lệnh sau:
|
1
|
php artisan make:controller AjaxController —plain
|
Bước 3 – Sau khi chạy xong:
Bước 4 – Sao chép code sau vào file app/Http/Controllers/AjaxController.php
|
1
2
3
4
5
6
7
8
9
10
11
|
<span class=“pun”><?</span><span class=“pln”>php
</span><span class=“kwd”>namespace</span> <span class=“typ”>App</span><span class=“pln”>HttpControllers</span><span class=“pun”>;</span>
<span class=“kwd”>use</span> <span class=“typ”>Illuminate</span><span class=“pln”>HttpRequest</span><span class=“pun”>;</span>
<span class=“kwd”>use</span> <span class=“typ”>App</span><span class=“pln”>HttpRequests</span><span class=“pun”>;</span>
<span class=“kwd”>use</span> <span class=“typ”>App</span><span class=“pln”>HttpControllersController</span><span class=“pun”>;</span>
<span class=“kwd”>class</span> <span class=“typ”>AjaxController</span> <span class=“kwd”>extends</span> <span class=“typ”>Controller</span> <span class=“pun”>{</span>
<span class=“kwd”>public</span> <span class=“kwd”>function</span><span class=“pln”> index</span><span class=“pun”>(){</span><span class=“pln”>
$msg </span><span class=“pun”>=</span> <span class=“str”>“This is a simple message.”</span><span class=“pun”>;</span>
<span class=“kwd”>return</span><span class=“pln”> response</span><span class=“pun”>()–></span><span class=“pln”>json</span><span class=“pun”>(</span><span class=“pln”>array</span><span class=“pun”>(</span><span class=“str”>‘msg’</span><span class=“pun”>=></span><span class=“pln”> $msg</span><span class=“pun”>),</span> <span class=“lit”>200</span><span class=“pun”>);</span>
<span class=“pun”>}</span>
<span class=“pun”>}</span>
|
Bước 5 – thêm dòng sau vào app/Http/routes.php.
|
1
2
3
4
|
Route::get(‘ajax’,function(){
return view(‘message’);
});
Route::post(‘/getmsg’,‘AjaxController@index’);
|
Bước 6 – Vào URL sau để xem nó hoạt động ra sao
http://localhost:8000/ajax
Bước 7 – Bạn sẽ được chuyển tới 1 trang và ở đó bạn sẽ thấy 1 thông điệp hiện ra như sau:
Bước 8 – Sau khi click vào button sẽ như sau:
