Xóa ajax trong php

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 hệ thống truyền thông, ứ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 của 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 or mà ảnh 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 tế

Video demo của ứng dụng

Các chủ đề đã được cập nhật

• Điều kiện tiên quyết
• Ajax is what
• 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

This direction direction;

• Bạn đã hiểu những điều cơ bản của Laravel
• You have PHP and MySQL and run
• 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
• You have a web browser HIỆN hỗ trợ HTML5
• Bạn đã theo dõi chuỗi 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 JavaScript và XML không đồng bộ. AJAX đề cập đến một nhóm công nghệ cho phép 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 phát triển 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 web ứng dụng

• 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 tiền và Ajax cho phép bạn tiết kiệm chi phí. Các ứng dụng truyền thống yêu cầu tải lại tất cả các tài liệu 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 only allow you get data essential from the host
• 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ể hệ thống hiệu nă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 điểm yếu 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 JavaScript của 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 với 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ợ 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 lắng nghe 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 mứ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 thông 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, những điểm ưu việt vượt trội hơn những điểm yếu 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ố vấn đề mà bạn nên tưởng tượng khi 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 công việc đầu vào. Có thể sử dụng Ajax để 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 thảo. This only as a 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ự phục hồi.
• 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 đoạn 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 những kết quả liên quan đến các trang khác nhau. 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? . 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 đa dạng
• Xác định 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 liệu nó có khả dụng hay khô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 yêu cầu bạn phải biết JavaScript và một bộ 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 khai thác Ajax

Các ví dụ 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] - 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 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 is 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 cơ sở HTML, CSS và JavaScript để 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 nhà soạn nhạc để 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 máy tính để bàn. Vui lòng sử dụng bất kỳ vị trí nào bạn thích. Open terminal

cd ~/Desktop

Run command after to create a new project

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

Lệnh 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ử cài đặt. Chúng tôi sẽ làm việc với máy chủ tích hợp

Run command after

php artisan serve --port=777

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

Open URL after your web browser

//localhost:777

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

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

Mở thiết bị đầu cuối và truy cập vào dự án gốc

Run command after to create model and migation cùng một lúc

php artisan make:model Task –m

Lệnh tạo ra một nhiệm vụ mô hình và di chuyển của nó

Open Task model in /app/Task. php

Update code after here ``

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

• only the fields are being gán khối lượng

Bây giờ cập nhật di chuyển cơ sở dữ liệu tập tin

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

Update code as after

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, 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à cấu hình confign để kết nối với csdl

Run the SQL command after in MySQL

________số 8

Lệnh tạo cơ sở dữ liệu trong MySQL được gọi là ajax_crud

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

mở tệp. env in project

Set config as after

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 di chuyển

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

0

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

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

1

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

Update code after

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

2

sử dụng Chiếu sáng\Hỗ trợ\Mặt tiền\Lược đồ;

Lược đồ. defaultStringLength[191]; set default string default is 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]

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

3

Kiểm tra cơ sở dữ liệu sau khi chạy Migration. Bạn sẽ có thể tìm thấy bảng nhiệm vụ với hai bản ghi mà chúng tôi đã gieo trong quá trình di chuyển

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ù tôi chỉ cần một trang html cho tất cả các chức năng, nhưng chúng tôi sẽ tận dụng các phần của nụ 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

cd ajax-crud

5

cd ajax-crud

6

cd ajax-crud

6

cd ajax-crud

6

cd ajax-crud

6

cd ajax-crud

6

• hỏi_add. lưỡi. php - chứa HTML cho định dạng phương thức mà chúng tôi sẽ sử dụng để thêm một tác vụ mới
• task_delete. lưỡi. php - chứa HTML cho định dạng phương thức mà chúng tôi sẽ sử dụng để yêu cầu người dùng xác nhận trước khi xóa tác vụ
• nhiệm vụ_chỉnh sửa. lưỡi. php - chứa HTML cho định 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ụ
• nhiệm vụ. lưỡi. 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/phong cách. 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 / nhiệm vụ. 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 tài nguyên/chế độ xem/tác vụ tệp mới. lưỡi. php

Thêm mã vào tệp tác vụ. lưỡi. php

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

4

• Chung toi link cac file css on header trang
• set code tokken Laravel CSRF to meta title value. Chúng tôi sẽ cần đánh giá giá trị này khi thực hiện các hoạt động AJAX
• Trên dòng 25    Thêm tác vụ mới  xác định nghĩa sự kiện nhấp chuột 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 tác vụ. Dòng sự kiện. ngăn chặn Mặc định [];
• @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
• title=“sự kiện. preventDefault[];editTaskForm[{{$task->id}}];”
• title=“sự kiện. preventDefault[];deleteTaskForm[{{$task->id}}];”
• {{ $tasks->links[] }} ra các nút phần trang
• @include['partials. task_add'] @include['partials. task_edit’]@include[‘partials. task_delete’]  sử dụng mũ 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 xuống một số tài nguyên JavaScript tại nút của trang

Tạo kiểu CSS

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 phần xem

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

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

Mã cho các chế độ xem một phần như sau

Mã cho task_add. lưỡi. php

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

5

Code cho task_delete. lưỡi. php as after

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

6

Mã cho task_edit. lưỡi. php as after_. _

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

7

That is, it for the view. Please to now working on JavaScript

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

Tiếp theo việc tạo tác vụ tập tin. js trong thư mục /public/js

Add code after here

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

8

php artisan serve --port=777

1
Tuyến đường của chúng tôi sẽ tương tác với một mô hình có tên là TaskController và chúng tôi đã đặt tên cho tất cả các tuyến đường của mình.

Bộ điều khiển AJAX của Laravel

Bây giờ, hãy tạo lớp điều khiển cho đoạn mã trên

Run command after

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

9

php artisan serve --port=777

1
Mở /app/Http/Controllers/TasksController. php

Thêm mã sau

php artisan serve --port=777

1

cd ajax-crud

0

php artisan serve --port=777

1

cd ajax-crud

1

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

Chạy lệnh sau để khởi động máy chủ.
______31

cd ajax-crud

2

php artisan serve --port=777

1
Tải URL sau đó vào trình duyệt web của bạn

cd ajax-crud

3

php artisan serve --port=777

1
Bạn sẽ nhận được kết quả như sau

php artisan serve --port=777

1

php artisan serve --port=777

9

php artisan serve --port=777

1
Bấm vào nút bổ sung

You will get the modal form sau đây

//localhost:777

1

php artisan serve --port=777

1
Nhấp vào  Thêm nhiệm vụ mới 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

php artisan serve --port=777

1

//localhost:777

4

php artisan serve --port=777

1
Bấm vào nút chỉnh sửa

Bạn sẽ nhận được một hình thức phương thức với các chi tiết của nhiệm vụ mà bạn đã nhấp vào

//localhost:777

6

php artisan serve --port=777

1
Bấm vào nút xóa

Bạn sẽ nhận được các công thức sau đây

php artisan serve --port=777

1

//localhost:777

9

php artisan serve --port=777

1
Tổng kết

Trong hướng dẫn này, chúng tôi đã nghiên cứu 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

Installing next to

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 tôi có thể làm tốt hơn khi truy cập. Bạn 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 nào đặt ra chương trình nào mà bạn có và chúng tôi cũng hứa sẽ cố gắng hết sức để trả lời họ. 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 hoàn chỉnh mã nguồn

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. khóa kéo