Hướng dẫn ajax laravel 6

Các ứng dụng web ngày càng trở nên phổ biến hơn và người dùng mong đợi trải nghiệm tương tự được cung cấp bởi các ứng dụng máy tính để bàn. Theo truyền thống, các ứng dụng web phải gửi yêu cầu đến máy chủ và chờ phản hồi. Phản hồi phải làm mới toàn bộ trang web ngay cả khi đó chỉ là một khía cạnh nhỏ của trang cần được cập nhật. Điều này dẫn đến các vấn đề về hiệu suất và ảnh hưởng đến trải nghiệm người dùng. AJAX giải quyết vấn đề này bằng cách chỉ cập nhật điểm cần được cập nhật mà không ảnh hưởng đến toàn bộ trang.

Hướng dẫn trước tiên sẽ đề cập đến khía cạnh lý thuyết của AJAX, thảo luận về những lợi thế và bất lợi sau đó chỉ cho bạn cách thực hiện. Nếu bạn đã quen thuộc với lý thuyết thì bạn có thể bỏ qua nó và đi đến thực hiện.

Video demo của ứng dụng

Các chủ đề được đề cập:

Điều kiện tiên quyết
Ajax là gì
Tại sao nên sử dụng Ajax?
Khi nào nên sử dụng Ajax
API Ajax jQuery
Ví dụ CRUD của Laravel Ajax

Điều kiện tiên quyết:

Hướng dẫn này giả định;

Bạn hiểu những điều cơ bản của Laravel
Bạn có PHP và MySQL và chạy
Bạn có kiến thức cơ bản về HTML và JavaScript, đặc biệt là jQuery
Bạn đã cài đặt trình soạn thảo
Bạn có một trình soạn thảo văn bản hoặc IDE hỗ trợ PHP.
Bạn có một trình duyệt web hiện đại hỗ trợ HTML5
Bạn đã theo dõi loạt bài hướng dẫn và bạn hiểu những điều cơ bản của Laravel 5.

Ajax là gì?

AJAX là từ viết tắt của Asynchronous JavaScript and XML. AJAX đề cập đến một nhóm các công nghệ cho phép các máy khách ứng dụng web gửi và nhận dữ liệu từ máy chủ không đồng bộ. Trong trường hợp này, không đồng bộ đề cập đến việc gửi và truy xuất dữ liệu trong nền mà không ảnh hưởng đến việc hiển thị trang hiện tại. Ajax được triển khai bằng các công nghệ sau.

JavaScript - ngôn ngữ kịch bản phía máy khách liên kết tất cả các công nghệ lại với nhau
HTML / XHTML / CSS - được sử dụng để trình bày dữ liệu
Mô hình đối tượng tài liệu (DOM) - được sử dụng để truy cập và thao tác các tài liệu có cấu trúc
XML / JSON - được sử dụng để trao đổi dữ liệu. JSON hiện được sử dụng phổ biến thay cho định dạng XML.
XMLHttpRequest - Đối tượng JavaScript chịu trách nhiệm giao tiếp không đồng bộ với máy chủ.

Ưu điểm và nhược điểm của Ajax?

Sau đây là một số lợi thế của Ajax khi phát triển các ứng dụng web:

Cải thiện trải nghiệm người dùng - Ajax cho phép tạo các ứng dụng tương tác nhanh và không yêu cầu tải lại toàn bộ trang. Người dùng có thể tiếp tục sử dụng ứng dụng trong khi các hoạt động Ajax đang diễn ra trong nền
Giảm sử dụng băng thông - Băng thông tốn tiền và Ajax cho phép bạn tiết kiệm. Các ứng dụng truyền thống yêu cầu tải lại tất cả các tài sản ngay cả khi bạn chỉ quan tâm đến một phần nhỏ của ứng dụng. Điều này dẫn đến việc sử dụng lên rất nhiều băng thông. Ajax chỉ cho phép bạn lấy dữ liệu cần thiết từ máy chủ.
Cải thiện hiệu năng hệ thống- Ajax chỉ lấy dữ liệu cần thiết từ máy chủ. Điều này cải thiện đáng kể hiệu năng hệ thống và thời gian đáp ứng.
Thúc đẩy phân tách dữ liệu, logic nghiệp vụ và trình bày - Các cuộc gọi Ajax thường lấy dữ liệu từ máy chủ và nếu cần, logic nghiệp vụ được áp dụng. Dữ liệu được hiển thị sau khi các kích hoạt này được hoàn thành thành công.

Sau đây là những nhược điểm của việc sử dụng Ajax:

Yêu cầu JavaScript - JavaScript là công nghệ phía máy khách và bạn không có quyền kiểm soát đối với nó. Nếu người dùng vô hiệu hóa JavaScript trên trình duyệt web của họ thì Ajax sẽ không hoạt động.
Khả năng tương thích trình duyệt web - không phải tất cả các trình duyệt web, đặc biệt là các trình duyệt cũ đều hỗ trợ cho tất cả các công nghệ mà Ajax sử dụng. Ngày nay, hầu hết các trình duyệt đều hỗ trợ các công nghệ này, vì vậy bạn nên lo lắng nhiều về điều này.
Khó / không thể đánh dấu nội dung - người dùng thường đánh dấu nội dung để họ có thể dễ dàng quay lại nội dung đó sau. Với nội dung Ajax, điều này là không thể hoặc tối thiểu cần thêm nỗ lực để thực hiện.
Nội dung JavaScript nói chung không thân thiện với SEO - Công cụ tìm kiếm dễ dàng thu thập nội dung cổ điển hơn so với nội dung được tạo qua JavaScript. Phát triển nội dung SEO với JavaScript đòi hỏi nhiều nỗ lực hơn.

Tóm lại, trong hầu hết các trường hợp, các ưu điểm vượt trội hơn các nhược điểm và bạn sẽ phải làm việc với Ajax bằng cách này hay cách khác. Phần tiếp theo xem xét khi nào bạn nên sử dụng Ajax

Khi nào sử dụng AJAX

Sau đây là một số tình huống ý tưởng khi bạn nên sử dụng Ajax

Tự động hoàn tất - nếu bạn đã làm việc với bất kỳ công cụ tìm kiếm nào, rất có thể các đề xuất đã được đưa ra cho bạn trước khi bạn có thể hoàn thành việc nhập. Ajax có thể được sử dụng để cung cấp chức năng như vậy
Tự động lưu - khi bạn đang soạn email và một cái gì đó vào internet của bạn và bạn mất kết nối với máy chủ, rất có thể bạn sẽ tìm thấy công việc của mình trong thư mục bản nháp. Đây chỉ là một ví dụ. Nếu bạn phát triển hệ thống quản lý nội dung, bạn cũng có thể cung cấp chức năng tương tự nơi bạn lưu người dùng làm việc định kỳ để cung cấp chức năng tự động khôi phục.
Phân trang- bạn chỉ có thể nhìn thấy rất nhiều tại một thời điểm. Phân trang cho phép bạn hiển thị số lượng mục giới hạn tại một thời điểm và cung cấp các liên kết cho phép người dùng xem phân khúc tiếp theo. Tìm kiếm của Google liệt kê 10 mục trên mỗi trang và cung cấp cho bạn các liên kết đến các trang kết quả khác. Ajax có thể cải thiện đáng kể trải nghiệm người dùng khi hiển thị nội dung đã được phân trang.
Blog bình luận - những gì mà một blog không có phần bình luận? Trải nghiệm được cải thiện khi được triển khai bằng Ajax. Người dùng có thể gửi bình luận mà không cần tải lại toàn bộ trang có thể rất bực bội.
Xác thực thời gian thực - bạn có thể sử dụng Ajax để cung cấp phản hồi cho người dùng trong thời gian thực. Hãy nói rằng một người dùng đang điền vào một mẫu đăng ký trên trang web. Bạn có thể sử dụng Ajax để xác thực địa chỉ email đã gửi và cho người dùng biết nếu nó khả dụng trước khi người dùng thậm chí gửi biểu mẫu.
Nhiều và nhiều hơn nữa - Ajax cũng có thể được sử dụng để thực hiện các chức năng như khảo sát, bỏ phiếu trực tuyến, lọc và sắp xếp dữ liệu, v.v.

API AJAX jQuery

Sử dụng Ajax đòi hỏi bạn phải biết JavaScript và một bộ các công nghệ khác. Điều này làm tăng thời gian và chi phí phát triển. May mắn thay, các thư viện JavaScript như jQuery có thể làm cho cuộc sống của bạn dễ dàng hơn. jQuery có API Ajax cung cấp triển khai Ajax.

Các thành phần ví dụ của Laravel AJAX CRUD

Trước khi chúng tôi tạo ứng dụng của mình, trước tiên chúng tôi sẽ xem xét các thành phần chính tạo nên ứng dụng AJAX Laravel.

Giao diện lập trình ứng dụng AJAX (API) - các biểu mẫu AJAX của chúng tôi sẽ gửi dữ liệu đến máy chủ và nhận phản hồi. Dữ liệu từ biểu mẫu được gửi theo cách thông thường trong khi máy chủ phản hồi với nội dung JSON. Bạn có thể sử dụng bất kỳ định dạng nào có thể áp dụng được nhưng JSON là định dạng thường được sử dụng và là định dạng chúng tôi sẽ sử dụng trong hướng dẫn này.
JavaScript - JavaScript là thành phần cốt lõi của AJAX. Chúng tôi sẽ làm việc với thư viện jQuery trong hướng dẫn này để làm cho mọi thứ dễ dàng. Bạn không cần phải biết JavaScript để làm theo hướng dẫn này
Ứng dụng web - bằng cách này, chúng tôi sử dụng HTML, CSS và JavaScript cơ bản để xây dựng giao diện người dùng.

Ví dụ CRUD của Laravel Ajax

Trong phần này, chúng tôi sẽ sử dụng composer để tạo một ứng dụng Laravel mới bằng phiên bản mới nhất là 5,8 *. Tôi sẽ tạo ứng dụng của mình trên desktop. Hãy sử dụng bất cứ vị trí nào bạn thích.Mở terminal:

cd ~/Desktop

Chạy lệnh sau để tạo một dự án mới.

composer create-project laravel/laravel ajax-crud 6.0.*

Lệnh trên tạo thư mục ajax-crud và cài đặt phiên bản mới nhất của Laravel 6.0

Sau khi lệnh trên đã chạy thành công, hãy chạy lệnh sau để duyệt đến thư mục dự án mới

cd ajax-crud

Bây giờ hãy để thử nghiệm cài đặt. Chúng tôi sẽ làm việc với máy chủ tích hợp.

Chạy lệnh sau

php artisan serve --port=777

Lệnh trên bắt đầu phục vụ web tích hợp trên cổng 777

Mở URL sau trong trình duyệt web của bạn

http://localhost:777

Bạn sẽ thấy trang chào mừng cho Laravel

Chúng tôi sẽ tạo một ứng dụng danh sách đơn giản để làm

Mở terminal và duyệt đến root dự án.

Chạy lệnh sau để tạo model và migation cùng một lúc.

php artisan make:model Task –m

Lệnh trên tạo ra một model Task và migration của nó

Mở Task mô hình trong /app/Task.php

Cập nhật mã sau đây ``

protected $fillable = ['task', 'description','done']

chỉ định các trường có thể được gán khối lượng.

Bây giờ cập nhập file database migration.

Mở file migration /database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php

Cập nhập code như sau


bigIncrements('id');
            $table->string('task');
            $table->string('description');
            $table->boolean('done')->default(0);
            $table->timestamps();
        });

        Task::create([
            'task' => 'Weekend hookup',
            'description' => 'Call Helga in the afternoon',
            'done' => false,
        ]);

        Task::create([
            'task' => 'Late night coding',
            'description' => 'Finishing coding POS API',
            'done' => false,
        ]);
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tasks');
    }
}bigIncrements('id');
            $table->string('task');
            $table->string('description');
            $table->boolean('done')->default(0);
            $table->timestamps();
        });

        Task::create([
            'task' => 'Weekend hookup',
            'description' => 'Call Helga in the afternoon',
            'done' => false,
        ]);

        Task::create([
            'task' => 'Late night coding',
            'description' => 'Finishing coding POS API',
            'done' => false,
        ]);
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tasks');
    }
}

Nếu bạn không quen với khái niệm migration thỳ tôi khuyên bạn nên đọc Hướng dẫn về Migraton laravel.

Trước khi chạy migration chúng ta nên tạo csdl trong mysql và confign cấu hình để kết nối với csdl.

Chạy câu lệnh SQL sau trong MySQL


Create schema ajax_crud;
Create schema ajax_crud;

Lệnh trên tạo ra một cơ sở dữ liệu trong MySQL được gọi là ajax_crud.

Bây giờ, hãy cài đặt các tham số cấu hình cơ sở dữ liệu để kết nối với máy chủ MySQL.

Mở file .env trong dự án:

Đặt cấu hình như sau:


DB_HOST=localhost
DB_DATABASE=ajax_crud
DB_USERNAME=root
DB_PASSWORD=xxxDB_HOST=localhost
DB_DATABASE=ajax_crud
DB_USERNAME=root
DB_PASSWORD=xxx

Lưu ý: các cài đặt ở trên phải khớp với các cài đặt trên máy phát triển của bạn.

Thực hiện lệnh sau để chạy migration


php artisan migrate
php artisan migrate

Lưu ý: nếu bạn đang sử dụng phiên bản MySQL thấp hơn thường đi kèm với XAMPP thì bạn có thể nhận được thông báo lỗi sau


Illuminate\Database\QueryException  : SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))
Illuminate\Database\QueryException  : SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

Để giải quyết vấn đề trên, hãy mở /app/Providers/AppServiceProvider.php

Cập nhập code sau:

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191);
    }
}

use Illuminate\Support\Facades\Schema; imports the schema façade class

Schema::defaultStringLength(191);đặt độ dài chuỗi mặc định là di chuyển Laravel tương thích với các phiên bản thấp hơn của MySQL.

Lưu ý: bạn sẽ phải xóa thủ công các bảng được tạo một phần trong cơ sở dữ liệu trước khi bạn tiến hành lệnh sau.

Chạy lại lệnh sau (nếu bạn gặp lỗi ở trên, bạn có thể bỏ qua phần này)


php artisan migrate

php artisan migrate
php artisan migrate

Kiểm tra cơ sở dữ liệu sau khi chạy migration. Bạn sẽ có thể thấy bảng tasks với hai bản ghi mà chúng tôi đã gieo trong migration.

Laravel Blade Bootstrap Modal Forms

Chúng tôi sẽ sử dụng Twitter bootstrap để thực hiện một số kiểu dáng lạ mắt cho giao diện người dùng. Mặc dù chúng tôi chỉ cần một trang html cho tất cả các chức năng, chúng tôi sẽ tận dụng các phần của lưỡi kiếm Laravel để phân tách mã thành các phần nhỏ có thể quản lý được.

Cấu trúc của chúng tôi sẽ như sau

<code class="language-php"><img alt="" height="221" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_views_structure.png" style="float:left" width="237"/></code>

<code class="language-php"> </code>

ask_add.blade.php - chứa HTML cho dạng phương thức mà chúng ta sẽ sử dụng để thêm một tác vụ mới
task_delete.blade.php - chứa HTML cho dạng phương thức mà chúng ta sẽ sử dụng để yêu cầu người dùng xác nhận trước khi xóa tác vụ
task_edit.blade.php - chứa HTML cho dạng phương thức mà chúng ta sẽ sử dụng để chỉnh sửa và cập nhật các tác vụ
task.blade.php - là khung nhìn cha sẽ tải các khung nhìn một phần.

Chúng tôi sẽ làm việc với các tài nguyên JavaScript và CSS sau đây

css / style.css - tệp này sẽ chứa kiểu dáng cho giao diện đẹp mà bạn đã thấy trong hình trên.
js / task.js - tệp này sẽ chứa mã Javascript jQuery sẽ thực hiện các hoạt động AJAX CRUD.
Các tệp khác như thư viện Bootstrap và jQuery sẽ được tải trực tiếp từ các mạng CDN tương ứng.

Tạo mới file resources/views/tasks.blade.php

Thêm code vào file tasks.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 5.8 Ajax Example</title>
<link rel="shortcut icon" href="{{asset('images/favicon.png')}}" type="image/x-icon"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
</head>
<body>
    <div class="container">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>Manage <b>Tasks</b></h2>
                    </div>
                    <div class="col-sm-6">
                        <a onclick="event.preventDefault();addTaskForm();" href="#" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New Task</span></a>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Task</th>
                        <th>Created At</th>
                        <th>Description</th>
                        <th>Done</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tasks as $task)
                    <tr>
                        <td>{{$task->id}}</td>
                        <td>{{$task->task}}</td>
                        <td>{{$task->created_at}}</td>
                        <td>{{$task->description}}</td>
                        <td>{{($task->done) ? 'Yes' : 'No'}}</td>
                        <td>
                            <a onclick="event.preventDefault();editTaskForm({{$task->id}});" href="#" class="edit open-modal" data-toggle="modal" value="{{$task->id}}"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                            <a onclick="event.preventDefault();deleteTaskForm({{$task->id}});" href="#" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="clearfix">
                <div class="hint-text">Showing <b>{{$tasks->count()}}</b> out of <b>{{$tasks->total()}}</b> entries</div>
                {{ $tasks->links() }}
            </div>

        </div>
    </div>
    @include('partials.tasks_add')
    @include('partials.tasks_edit')
    @include('partials.tasks_delete')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{asset('js/tasks.js')}}"></script>
</body>
</html>

Chũng tôi link các file css trên header trang.
đặt mã tokken Laravel CSRF làm giá trị meta tiêu đề. Chúng tôi sẽ cần giá trị này khi thực hiện các hoạt động AJAX.
Trên dòng 25  Add New Task định nghĩa sự kiện click cho mà chúng ta sẽ sử dụng để hiển thị dạng phương thức mà chúng ta sẽ sử dụng để tạo các task. Dòng event.preventDefault (); ngăn chặn hành vi neo bình thường đang mở một liên kết và addTaskForm (); gọi một hàm JavaScript hiển thị biểu mẫu của chúng tôi.
@foreach ($ task as $ task) lặp qua biến $ task được truyền từ bộ điều khiển và hiển thị dữ liệu trong bảng
onclick=“event.preventDefault();editTaskForm({{$task->id}});” định nghĩa sự kiện click cho chức năng chỉnh sửa bản ghi chấp nhận id task cho tác vụ mà chúng tôi muốn chỉnh sửa.
onclick=“event.preventDefault();deleteTaskForm({{$task->id}});” định nghĩa sự kiện click cho chức năng xóa bản ghi chấp nhận id task cho tác vụ mà chúng tôi muốn xóa.
{{ $tasks->links() }} in ra các nút phần trang
@include(‘partials.tasks_add’) @include(‘partials.tasks_edit’)@include(‘partials.tasks_delete’) sử dụng lưỡi bao gồm chỉ thị để tải các khung nhìn một phần vào mẫu cha. Chúng tôi làm điều này cho mục đích tổ chức và tránh có một tệp lớn.
Cuối cùng, chúng tôi tải một số tài nguyên JavaScript tại nút của trang.

CSS Styling

Bạn cần tải css từ trang https://github.com/KodeBlog/Laravel-Ajax-CRUD-Example/blob/master/public/css/style.css

Bây giờ, hãy tạo ra các view partial.

Tạo một thư mục mới gọi là partials in /resources/views

Tạo các tệp sau trong /resources/views/partials

Mã cho các view partial như sau

Code cho task_add.blade.php

<!-- Add Task Modal Form HTML -->
<div class="modal fade" id="addTaskModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="frmAddTask">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Add New Task
                    </h4>
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" id="add-error-bag">
                        <ul id="add-task-errors">
                        </ul>
                    </div>
                    <div class="form-group">
                        <label>
                            Task
                        </label>
                        <input class="form-control" id="task" name="task" required="" type="text">
                        </input>
                    </div>
                    <div class="form-group">
                        <label>
                            Description
                        </label>
                        <input class="form-control" id="description" name="description" required="" type="text">
                        </input>
                    </div>
                </div>
                <div class="modal-footer">
                    <input class="btn btn-default" data-dismiss="modal" type="button" value="Cancel">
                        <button class="btn btn-info" id="btn-add" type="button" value="add">
                            Add New Task
                        </button>
                    </input>
                </div>
            </form>
        </div>
    </div>
</div>

Code cho task_delete.blade.php như sau

<!-- Delete Task Modal Form HTML -->
<div class="modal fade" id="deleteTaskModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="frmDeleteTask">
                <div class="modal-header">
                    <h4 class="modal-title" id="delete-title" name="title">
                        Delete Task
                    </h4>
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Are you sure you want to delete this task?
                    </p>
                    <p class="text-warning">
                        <small>
                            This action cannot be undone.
                        </small>
                    </p>
                </div>
                <div class="modal-footer">
                    <input id="task_id" name="task_id" type="hidden" value="0">
                        <input class="btn btn-default" data-dismiss="modal" type="button" value="Cancel">
                            <button class="btn btn-danger" id="btn-delete" type="button">
                                Delete Task
                            </button>
                        </input>
                    </input>
                </div>
            </form>
        </div>
    </div>
</div>

Code cho task_edit.blade.php như sau_:_

<!-- Edit Modal HTML -->
<div class="modal fade" id="editTaskModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="frmEditTask">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Edit Task
                    </h4>
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" id="edit-error-bag">
                        <ul id="edit-task-errors">
                        </ul>
                    </div>
                    <div class="form-group">
                        <label>
                            Task
                        </label>
                        <input class="form-control" id="task" name="task" required="" type="text">
                        </input>
                    </div>
                    <div class="form-group">
                        <label>
                            Description
                        </label>
                        <input class="form-control" id="description" name="description" required="" type="text">
                        </input>
                    </div>
                </div>
                <div class="modal-footer">
                    <input id="task_id" name="task_id" type="hidden" value="0">
                        <input class="btn btn-default" data-dismiss="modal" type="button" value="Cancel">
                            <button class="btn btn-info" id="btn-edit" type="button" value="add">
                                Update Task
                            </button>
                        </input>
                    </input>
                </div>
            </form>
        </div>
    </div>
</div>

Đó là, nó cho các view. Hãy để ngay bây giờ làm việc trên JavaScript

Ví dụ về mã JavaScript của CRavel AJAX jQuery CRUD

Tiếp theo tạo tập tin task.js trong thư mục /public/js

Thêm mã sau đây


$(document).ready(function() {
    $("#btn-add").click(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'POST',
            url: '/tasks',
            data: {
                task: $("#frmAddTask input[name=task]").val(),
                description: $("#frmAddTask input[name=description]").val(),
            },
            dataType: 'json',
            success: function(data) {
                $('#frmAddTask').trigger("reset");
                $("#frmAddTask .close").click();
                window.location.reload();
            },
            error: function(data) {
                var errors = $.parseJSON(data.responseText);
                $('#add-task-errors').html('');
                $.each(errors.messages, function(key, value) {
                    $('#add-task-errors').append('
$(document).ready(function() {
    $("#btn-add").click(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'POST',
            url: '/tasks',
            data: {
                task: $("#frmAddTask input[name=task]").val(),
                description: $("#frmAddTask input[name=description]").val(),
            },
            dataType: 'json',
            success: function(data) {
                $('#frmAddTask').trigger("reset");
                $("#frmAddTask .close").click();
                window.location.reload();
            },
            error: function(data) {
                var errors = $.parseJSON(data.responseText);
                $('#add-task-errors').html('');
                $.each(errors.messages, function(key, value) {
                    $('#add-task-errors').append('$(document).ready(function() {
    $("#btn-add").click(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'POST',
            url: '/tasks',
            data: {
                task: $("#frmAddTask input[name=task]").val(),
                description: $("#frmAddTask input[name=description]").val(),
            },
            dataType: 'json',
            success: function(data) {
                $('#frmAddTask').trigger("reset");
                $("#frmAddTask .close").click();
                window.location.reload();
            },
            error: function(data) {
                var errors = $.parseJSON(data.responseText);
                $('#add-task-errors').html('');
                $.each(errors.messages, function(key, value) {
                    $('#add-task-errors').append('```

- ' + value + '
- '); }); $("#add-error-bag").show(); } }); }); $("#btn-edit").click(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ type: 'PUT', url: '/tasks/' + $("#frmEditTask input[name=task_id]").val(), data: { task: $("#frmEditTask input[name=task]").val(), description: $("#frmEditTask input[name=description]").val(), }, dataType: 'json', success: function(data) { $('#frmEditTask').trigger("reset"); $("#frmEditTask .close").click(); window.location.reload(); }, error: function(data) { var errors = $.parseJSON(data.responseText); $('#edit-task-errors').html(''); $.each(errors.messages, function(key, value) { $('#edit-task-errors').append('
  - ' + value + '
  - '); }); $("#edit-error-bag").show(); } }); }); $("#btn-delete").click(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ type: 'DELETE', url: '/tasks/' + $("#frmDeleteTask input[name=task_id]").val(), dataType: 'json', success: function(data) { $("#frmDeleteTask .close").click(); window.location.reload(); }, error: function(data) { console.log(data); } }); }); }); function addTaskForm() { $(document).ready(function() { $("#add-error-bag").hide(); $('#addTaskModal').modal('show'); }); } function editTaskForm(task_id) { $.ajax({ type: 'GET', url: '/tasks/' + task_id, success: function(data) { $("#edit-error-bag").hide(); $("#frmEditTask input[name=task]").val(data.task.task); $("#frmEditTask input[name=description]").val(data.task.description); $("#frmEditTask input[name=task_id]").val(data.task.id); $('#editTaskModal').modal('show'); }, error: function(data) { console.log(data); } }); } function deleteTaskForm(task_id) { $.ajax({ type: 'GET', url: '/tasks/' + task_id, success: function(data) { $("#frmDeleteTask #delete-title").html("Delete Task (" + data.task.task + ")?"); $("#frmDeleteTask input[name=task_id]").val(data.task.id); $('#deleteTaskModal').modal('show'); }, error: function(data) { console.log(data); } }); }

    - $("#btn-add").click(function() {…} xác định sự kiện nhấp cho nút Thêm tác vụ ở dạng phương thức.
    - $.ajaxSetup({…}); thiết lập tiêu đề AJAX X-CSRF-TOKEN và chuyển giá trị mã thông báo mà chúng tôi đã thiết lập trong phần header của mẫu chính. 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') đọc meta tiêu đề có tên csrf-token và đọc giá trị của thuộc tính nội dung và gán nó cho X-CSRF-TOKEN.
    - $.ajax({…}); thực hiện thao tác AJAX..
      - type: 'POST', chỉ định động từ HTTP được sử dụng.
      - url: '/tasks', xác định URL mà hoạt động AJAX của chúng tôi sẽ tương tác.
      - data: {…} định nghĩa các giá trị nên được gửi đến máy chủ back-end xử lý các hoạt động AJAX. task: $("#frmAddTask input[name=task]").val(), sử dụng jQuery để lấy giá trị của tác vụ có tên đầu vào trong biểu mẫu với id của #frmAddTask .
      - dataType: 'json',đặt kiểu dữ liệu cho hoạt động
      - success: function(data) {…} định nghĩa hàm nên được gọi nếu mọi thứ hoạt động tốt. Hàm chấp nhận dữ liệu tham số chứa dữ liệu được trả về từ máy chủ.
      - error: function(data) {…} là hàm được gọi khi back-end trả về lỗi. Trong trường hợp của chúng tôi, chúng tôi hy vọng sẽ nhận được lỗi xác thực và hiển thị chúng cho người dùng.
    - $("#btn-edit").click(function() {…} xác định sự kiện nhấn cho nút gửi tác vụ chỉnh sửa
    - $("#btn-delete").click(function() {…} xác định sự kiện nhấn cho nút gửi tác vụ xóa
    - function addTaskForm() {…} định nghĩa hiển thị form modal thêm task
    - function editTaskForm(task_id) {....} xác định chức năng hiển thị biểu mẫu chỉnh sửa. Hàm này chấp nhận tham số của task_id, thực hiện thao tác AJAX để truy xuất bản ghi từ máy chủ sau đó hiển thị các giá trị được trả về trong biểu mẫu tác vụ chỉnh sửa.
    - function deleteTaskForm(task_id) {...} xác định chức năng hiển thị mẫu phương thức xác nhận bản ghi xóa. Nó chấp nhận một tham số task_id được sử dụng để truy xuất bản ghi từ cơ sở dữ liệu và hiển thị tên tác vụ trong biểu mẫu đối thoại xóa xác nhận.

Đó là nó cho JavaScript phía máy khách. Nếu bạn cần giải thích thêm về đoạn mã trên thì hãy sử dụng phần bình luận để hỏi.

Laravel AJAX API

Bây giờ chúng tôi sẽ cần tạo một API cơ bản sẽ đáp ứng các cuộc gọi AJAX của chúng tôi. Laravel có một tệp tùy chỉnh để xác định các tuyến API nhưng để đơn giản, vì lợi ích của chúng tôi, chúng tôi sẽ xác định tuyến đường API API của chúng tôi trong mẫu tuyến đường web.

Bảng dưới đây cho thấy các tuyến đường mà chúng tôi sẽ làm việc với

`<code class="language-php"><em><img alt="" height="265" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_api_routes.png" width="919"/></em></code>`
 `<code class="language-php"><em></em></code>`
Mở /routes/web.php

Thêm routes

```php

Route::get('/', [
    'uses' => 'TasksController@index',
    'as' => 'tasks.index',
]);

Route::group(['prefix' => 'tasks'], function () {
    Route::get('/{id}', [
        'uses' => 'TasksController@show',
        'as'   => 'tasks.show',
    ]);

    Route::post('/', [
        'uses' => 'TasksController@store',
        'as'   => 'tasks.store',
    ]);

    Route::put('/{id}', [
        'uses' => 'TasksController@update',
        'as'   => 'tasks.update',
    ]);

    Route::delete('/{id}', [
        'uses' => 'TasksController@destroy',
        'as'   => 'tasks.destroy',
    ]);
});

Route::get('/', [
    'uses' => 'TasksController@index',
    'as' => 'tasks.index',
]);

Route::group(['prefix' => 'tasks'], function () {
    Route::get('/{id}', [
        'uses' => 'TasksController@show',
        'as'   => 'tasks.show',
    ]);

    Route::post('/', [
        'uses' => 'TasksController@store',
        'as'   => 'tasks.store',
    ]);

    Route::put('/{id}', [
        'uses' => 'TasksController@update',
        'as'   => 'tasks.update',
    ]);

    Route::delete('/{id}', [
        'uses' => 'TasksController@destroy',
        'as'   => 'tasks.destroy',
    ]);
});
Route::get('/', [
    'uses' => 'TasksController@index',
    'as' => 'tasks.index',
]);

Route::group(['prefix' => 'tasks'], function () {
    Route::get('/{id}', [
        'uses' => 'TasksController@show',
        'as'   => 'tasks.show',
    ]);

    Route::post('/', [
        'uses' => 'TasksController@store',
        'as'   => 'tasks.store',
    ]);

    Route::put('/{id}', [
        'uses' => 'TasksController@update',
        'as'   => 'tasks.update',
    ]);

    Route::delete('/{id}', [
        'uses' => 'TasksController@destroy',
        'as'   => 'tasks.destroy',
    ]);
});

<code class="language-php"></code>
Các tuyến đường của chúng tôi sẽ tương tác với một mô hình có tên TaskController và chúng tôi đã đặt tên cho tất cả các tuyến đường của mình.

Laravel AJAX Controller

Bây giờ, hãy tạo lớp controller cho đoạn mã trên

Chạy lệnh sau


php artisan make:controller TasksController
php artisan make:controller TasksControllerphp artisan make:controller TasksController

<code class="language-php"></code>
Mở /app/Http/Controllers/TasksController.php

Thêm code sau
<code class="language-php"></code>


paginate(5);

        return view('tasks')->with('tasks',$tasks);
    }

    public function store(Request $request)
    {
        $validator = Validator::make($request->input(), array(
            'task' => 'required',
            'description' => 'required',
        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Task::create($request->all());

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function show($id)
    {
        $task = Task::find($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function update(Request $request, $id)
    {
        $validator = Validator::make($request->input(), array(
            'task' => 'required',
            'description' => 'required',
        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Task::find($id);

        $task->task        =  $request->input('task');
        $task->description = $request->input('description');

        $task->save();

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function destroy($id)
    {
        $task = Task::destroy($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }
}
paginate(5);

        return view('tasks')->with('tasks',$tasks);
    }

    public function store(Request $request)
    {
        $validator = Validator::make($request->input(), array(
            'task' => 'required',
            'description' => 'required',
        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Task::create($request->all());

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function show($id)
    {
        $task = Task::find($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function update(Request $request, $id)
    {
        $validator = Validator::make($request->input(), array(
            'task' => 'required',
            'description' => 'required',
        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Task::find($id);

        $task->task        =  $request->input('task');
        $task->description = $request->input('description');

        $task->save();

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function destroy($id)
    {
        $task = Task::destroy($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }
}paginate(5);

        return view('tasks')->with('tasks',$tasks);
    }

    public function store(Request $request)
    {
        $validator = Validator::make($request->input(), array(
            'task' => 'required',
            'description' => 'required',
        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Task::create($request->all());

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function show($id)
    {
        $task = Task::find($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function update(Request $request, $id)
    {
        $validator = Validator::make($request->input(), array(
            'task' => 'required',
            'description' => 'required',
        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Task::find($id);

        $task->task        =  $request->input('task');
        $task->description = $request->input('description');

        $task->save();

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function destroy($id)
    {
        $task = Task::destroy($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }
}

<code class="language-php"></code>

- public function index(Request $request){…} định nghĩa phương thức chỉ mục hiển thị chế độ xem lưỡi cắt và chuyển vào biến $ task làm tham số. $tasks = Task::orderBy('id', 'desc')->paginate(5); sắp xếp các nhiệm vụ theo id theo thứ tự giảm dần và phân trang kết quả.
- public function store(Request $request){…} là chức năng nhận yêu cầu AJAX POST và tạo một tác vụ mới. Hàm xác nhận đầu vào. Nếu đầu vào vượt qua thì một tác vụ mới được tạo và kết quả thành công được trả về. Nếu sau đó xác nhận thất bại thì một phản hồi lỗi được trả về với thông báo liên quan.
- public function show($id){…} là chức năng đáp ứng yêu cầu AJAX GET cho một tác vụ.
- public function update(Request $request, $id){…} đây là hàm đáp ứng với phương thức AJAX PUT. Nó cũng thực hiện xác nhận.
- public function destroy($id){…} định nghĩa hàm đáp ứng yêu cầu AJAX DELETE và xóa bản ghi khỏi cơ sở dữ liệu.

Đang tải ứng dụng trong trình duyệt web

Chạy lệnh sau để khởi động máy chủ.
<code class="language-php"></code>


php artisan serve –port=777
php artisan serve –port=777php artisan serve –port=777

<code class="language-php"></code>
Tải URL sau vào trình duyệt web của bạn


http://localhost:777

http://localhost:777
http://localhost:777

<code class="language-php"></code>
Bạn sẽ nhận được kết quả như sau

<code class="language-php"></code>
<code class="language-php"><img alt="" height="543" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_list_tasks.png" width="794"/></code>
<code class="language-php"></code>
Bấm vào nút thêm

Bạn sẽ nhận được các modal form sau đây

<code class="language-php"><img alt="" height="543" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_add_tasks.png" width="794"/></code>
<code class="language-php"></code>
Nhấp vào Add New Task mà không cần nhập bất cứ điều gì

Bạn sẽ nhận được các thông báo lỗi sau
<code class="language-php"></code>
<code class="language-php"><img alt="" height="543" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_add_tasks_validation_errors.png" width="794"/></code>
<code class="language-php"></code>
Bấm vào nút chỉnh sửa

Bạn sẽ nhận được một modal form với các chi tiết của nhiệm vụ mà bạn đã click

<code class="language-php"><img alt="" height="543" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_edit_tasks.png" width="794"/></code>
<code class="language-php"></code>
Bấm vào nút xóa

Bạn sẽ nhận được các hình thức sau đây
<code class="language-php"></code>
<code class="language-php"><img alt="" height="543" src="https://cdn2.kode-blog.com/images/laravel/laravel_ajax_delete_tasks.png" width="794"/></code>
<code class="language-php"></code>
Tổng kết

Trong hướng dẫn này, chúng tôi đã học cách tạo một ứng dụng AJAX của Laravel để tạo, đọc, cập nhật và xóa dữ liệu khỏi cơ sở dữ liệu. Chúng tôi sẽ xem xét cách thực hiện xác thực laravel AJAX và hiển thị các thông báo lỗi trên biểu mẫu phương thức khi chúng xảy ra.

Cài gì tiếp theo

Nếu bạn thấy hướng dẫn này hữu ích, hãy hỗ trợ chúng tôi bằng cách sử dụng các nút phương tiện truyền thông xã hội để thích và chia sẻ hướng dẫn. Nếu bạn không thấy nó hữu ích, vui lòng sử dụng phần bình luận bên dưới để cho chúng tôi biết làm thế nào chúng ta có thể làm tốt hơn vào lần tới. Bạn cũng có thể đăng ký tài khoản miễn phí trên trang web và sử dụng phần diễn đàn để hỏi bất kỳ câu hỏi lập trình nào mà bạn có và chúng tôi hứa sẽ cố gắng hết sức để trả lời chúng. Bạn cũng có thể trả lời các câu hỏi từ các thành viên khác và xây dựng danh tiếng của bạn.

Tải xuống mã nguồn hoàn chỉnh

Bạn có thể tải xuống mã nguồn hoàn chỉnh bằng cách nhấp vào đây https://github.com/KodeBlog/Laravel-Ajax-CRUD-Example/archive/master.zip

Thay thế, bạn có thể sao chép kho lưu trữ bằng lệnh Git sau
<code class="language-php"></code>


git clone https://github.com/KodeBlog/Laravel-Ajax-CRUD-Example.git
composer install
git clone https://github.com/KodeBlog/Laravel-Ajax-CRUD-Example.git
composer installgit clone https://github.com/KodeBlog/Laravel-Ajax-CRUD-Example.git
composer install```

 `<code class="language-php"><em></em></code>`
Nguồn [https://kode-blog.io/laravel-5-ajax-tutorial](https://kode-blog.io/laravel-5-ajax-tutorial)

Dich bởi Vũ Đức Nguyên
 `<code class="language-php"><em></em></code>`

Hướng dẫn ajax laravel 6

Bình luận