Ajax trong Javascript là một trong những kĩ thuật phổ biến nhất hiện nay. Việc sử dụng ajax cho trang web làm tăng trải nghiệm của người dùng, trang web sẽ không cần load lại mà vẫn thay đổi dữ liệu. Ajax chính là chức năng tốt nhất trong việc xây dựng giỏ hàng bằng PHP. Vậy làm thế nào để có thể kết hợp Ajax trong Jquery và Laravel trong PHP. Hãy cũng chúng tôi tìm hiểu kỹ thuật này nhé
Mục lục bài viết
Tải laravel với composer
– Composer là công cụ dùng để quản lý các thư viện trong PHP. Nó giúp chúng ta tiết kiệm khá nhiều thời gian với các thư viện cần thiết mà dự án của mình cần sử dụng. Với composer, chúng ta chỉ cần khai báo tên và version của thư viện mà bạn cần sử dụng, tất cả mọi việc composer sẽ xử lý cho bạn 1 cách đơn giản nhất.
– Sau khi cài đặt composer, bạn chỉ cần bật CMD ở nơi bạn muốn cài đặt laravel và chạy câu lệnh: composer create-project laravel/laravel lar-53 –prefer-dist
Chạy laravel trên localhost
– Bạn có thể sử dụng phần mềm xampp để có thể dễ dàng tạo server riêng cho mình để làm việc trên máy tính cá nhân của mình
– Để có thể chạy được laravel trên xampp, bạn cần vào cmd của thư mục và gõ lệnh: artisan serve
Xây dựng cơ sở dữ liệu để tiền hành làm việc với ajax trong jquery
– Bước chuẩn bị đã xong, bây giờ chúng ta có thể tiến hành kết hợp giữa ajax và laravel để tạo nên 1 chức năng tốt hơn cho trang web của mình
B1: Tạo 1 table users với các trường: id, hoten, email
Sau khi tạo thành công table users trên phần mềm Xampp với tên csdl là ajax
Trong file .ENV trong laravel, hãy kết nối với cơ sở dữ liệu.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ajax
DB_USERNAME=root
DB_PASSWORD=
Tạo model cho bảng travels bằng terminal
php artisan make:model Users
Trong file App\Users.php chúng ta sửa model như sau
<?php
namespace App\Model;
use Illuminate\Database\Eloquent\Model;
class Users extends Model
{
public $timestamps = false;
public $fillable = [‘hoten’, ’email’];}
Đây là cơ sở dữ liệu của tôi, nếu các bạn đặt tên khác thì có thể custom lại. Như vậy là chúng ta đã xong bước đầu, tạo csdl và kết nối laravel với csdl.
B2: Tạo giao diện cho form
<div class=”mt-5 mx-auto my-auto” id=”review”>
<form class=”form-comment ratings pt-2 ” action=”{{ route(‘index’) }}” method=”POST” id=”myForm”>
{{ csrf_field() }}
<div class=”row “>
<div class=”col-md-6 col-12 text-center”>
<label for=”inputname2″>Họ và tên</label>
<input type=”text” id=”inputname2″ class=”form-control mb-3″ placeholder=”Your name” name=”name”>
</div>
<div class=”col-md-6 col-12 text-center”>
<label for=”inputemail2″>Địa chỉ email</label>
<input type=”text” class=”form-control” id=”inputemail2″ placeholder=”Johndoe@gmail.com” name=”email”>
</div>
</div><div class=”row”>
<div class=”col-lg-6 offset-lg-3 col-12″>
<button type=”submit” class=”btn col-sm-12 my-2 btn-primary mb-lg-0 mb-4″ id=”myBtn”>Lưu</button>
</div>
</div>
</form>// Javascript
<script type=”text/javascript”>
$(‘#myForm’).submit(function (e) {
e.preventDefault();$.ajax({
type: ‘POST’,
cache: false,
url: “{{ route(‘ajax’) }}”,
data: {
“_token”: ‘{{ csrf_token() }}’,
“name”: $(“#inputname2”).val(),
“email”: $(“#inputemail2”).val(),
},
success: function (data) {
$(‘#review’).html(data);
console.log(‘Submission was successful.’);
},
error: function (data) {
console.log(‘An error occurred.’);
console.log(data);
},
});
});
</script><div>
Tại đây chúng ta sử dụng method post nên tôi sẽ truyền _token vào data để server có thể hiểu method post
B3: Tạo route và xử lý
Đầu tiên chúng ta sẽ tạo controller bằng terminal
php artisan make:controller IndexController
Trong route/web.php tạo 2 route:
Route::get(”, [
‘uses’ => ‘IndexController@index’,
‘as’ => ‘index’
]);Route::post(‘ajax’, [
‘uses’ => ‘IndexController@ajax’,
‘as’ => ‘ajax’
]);
Tiếp theo chúng ta sẽ xử lý controller để hiển thị và để xử lý
Hiển thị form:
<?php
namespace App\Http\Controllers\Ajax;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Users;class IndexController extends Controller
{public function index()
{
return view(‘index’);
}
public function ajax(Request $request){
$name = $request->name;
$email = $request->email;
$user = new Users();
$user->hoten = $name;
$user->email = $email;
$user->save();
//Sau khi lưu vào cơ sở dữ liệu chúng ta sẽ trả về: Lưu thành công
return ‘<div>Lưu dữ liệu thành công</div>’
}
}
Như vậy là chúng ta vừa tạo 1 form thêm người dùng sử dụng ajax trong laravel, hy vọng sau bài viết này các bạn có thể áp dụng nó ở nhiều chức năng khác trên website của mình. Với việc kết hợp công nghệ ajax vào trang web để ngăn việc load lại trang web nhiều lần, trang web cũng bạn cũng sẽ mang lại trải nghiệp tốt hợp cho người dùng. Hãy cũng chúng tôi xây dựng những chức năng hay để phát triển website của mình phát triển một cách tốt nhất nhé.
