فهرست:
تکتنولوژی Ajax مخفف (Asynchronous JavaScript and XML) می باشد، و با کمک آن قابلیت ارسال و دریافت درخواست را در client-side برای وب اپلیکیشن فراهم می کنیم، در این مبحث ما برای بررسی استفاده از Ajax در لاراول از کتابخانه Jquery استفاده خواهیم داشت، در سمت server می توانید از تابع response
برای ارسال پاسخ به client استفاده کنید. در لاراول می توان برای ارسال پاسخ در فرمت JSON از تابع json
استفاده کرد.
json() function syntax
json(string|array $data = array(), int $status = 200, array $headers = array(), int $options)
مثال کاربردی استفاده از Ajax در لاراول
برای بررسی بهتر استفاده از Ajax در لاراول به ذکر یک مثال کاربردی می پردازیم، برای این منظور ابتدا message.php
در مسیر resources/views
با مختویات زیر ایجاد می کنیم.
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>
<button type="button" onClick="getMessage()">Replace Message</button>
</body>
</html>
حال با استفاده از خط فرمان زیر کنترلر
AjaxController
را ایجاد می کنیم.
php artisan make:controller AjaxController --plain
بعد از اجرای خط فرمان بالا فایل
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);
}
}
حال فایل روت را بصورت زیر ویرایش کنید.
app/Http/routes.php
Route::get('ajax',function() {
return view('message');
});
Route::post('/getmsg','AjaxController@index');
برای بررسی خروجی مرورگر خود ب آدرس زیر مراجعه فرمایید.
http://localhost:8000/ajax
حال با کلیک بر روی دکمه مشاهده می فرمایید که بدون رفرش صفحه متن مورد نظر تغییر می کند.