Ajax có nghĩa là gì trong wordpress?

AJAX là một công cụ rất mạnh mẽ và linh hoạt cho phép các nhà phát triển tạo ra các ứng dụng hợp lý hơn. Nó có thể được sử dụng cho nhiều mục đích như tải nội dung hoặc xác minh thông tin đăng nhập

Lợi ích chính của AJAX là nó không đồng bộ, nghĩa là toàn bộ trang không cần tải lại để nhận dữ liệu mới

WordPress được trang bị tốt cho AJAX. Nó có một cơ chế tuyệt vời để làm việc với nó, cho phép bạn triển khai chức năng AJAX mà không gặp nhiều phiền phức

Trong bài viết này, tôi sẽ hướng dẫn bạn những kiến ​​thức cơ bản về AJAX và chúng ta sẽ tạo một tiện ích mở rộng rất đơn giản để lấy kết quả tìm kiếm bằng AJAX trong chủ đề Twenty Fourteen mặc định

Tiếp tục đọc hoặc tiếp tục sử dụng các liên kết này

• AJAX là gì?
• AJAX được sử dụng như thế nào?
• Sử dụng AJAX trong WordPress
• Tải kết quả tìm kiếm trên trang web của bạn với AJAX

AJAX là gì?

AJAX thực sự không phải là một công nghệ, nó là sự kết hợp của nhiều ngôn ngữ lập trình mà bạn có thể đã biết. AJAX là viết tắt của Javascript và XML không đồng bộ. Javascript được sử dụng để gửi một số dữ liệu đến máy chủ, máy chủ này sẽ gửi lại một thứ gì đó ở định dạng XML

XML thực sự không cần thiết, thay vào đó JSON thường được sử dụng. Khi JSON được sử dụng, đôi khi chúng tôi gọi nó là AJAJ thay vì AJAX. Trên thực tế, vì máy chủ có thể trả về một chuỗi hoặc HTML đơn giản, nên chúng tôi không cần phải giới hạn đối với XML hoặc JSON. Với mục đích của bài viết này, tôi sẽ đề cập đến AJAX bất kể loại dữ liệu chúng tôi trả về

AJAX được sử dụng như thế nào?

Hãy xem một ví dụ thực tế mà không cần đi sâu vào mã. Giả sử bạn đã tạo một trang web bất động sản và bạn cung cấp cho khách truy cập cơ hội lưu danh sách để xem sau. Chức năng này có thể được cung cấp bằng cách sử dụng nút “Save For Later”

Khi người dùng nhấp vào nút này, họ sẽ được đưa đến một tập lệnh thêm danh sách vào danh sách sau này của họ và họ được chuyển hướng trở lại trang họ đang xem. Điều này có nghĩa là trang cần được tải lại. Một trang web bất động sản có thể chứa rất nhiều hình ảnh và nhiều hình ảnh có thể không được lưu vào bộ nhớ đệm, điều này sẽ góp phần làm thời gian tải lâu hơn

Một giải pháp tốt hơn nhiều sẽ là như sau. Người dùng nhấp vào nút và một hình động tải nhỏ được hiển thị trên nút. Sau đó, nút này mờ dần, dòng chữ “Danh sách đã lưu” được hiển thị ở vị trí của nó. Trong khi điều này xảy ra, người dùng có thể tiếp tục sử dụng trang web như bình thường

Dưới mui xe, quá trình này rất giống nhau trong cả hai trường hợp. Khi nhấp vào nút, người dùng sẽ không được đưa đến bất kỳ đâu, nhưng sử dụng Javascript, chúng tôi đưa ra yêu cầu đối với một tệp cụ thể, cung cấp ID danh sách. Tệp được đề cập chỉ ra ai là người dùng hiện tại và sử dụng ID danh sách được cung cấp để thêm nó vào danh sách sau này của họ. Khi điều này được thực hiện, tập lệnh trả về một giá trị được chuyển trở lại hàm Javascript. Dựa trên điều này, chúng tôi có thể thao tác trên giao diện người dùng để hiển thị cho người dùng các thông báo tương tác có ý nghĩa

Đừng lo lắng nếu điều đó có vẻ hơi phức tạp. Trong thực tế, quá trình này khá dễ dàng, bạn chỉ cần làm quen một chút

Sử dụng AJAX trong WordPress

AJAX hoàn toàn độc lập với các framework như WordPress. Bạn có thể thực hiện nó theo bất kỳ cách nào bạn muốn. Tuy nhiên, có hỗ trợ tích hợp trong WordPress cho quy trình làm việc AJAX. Bạn nên làm theo điều này nếu bạn muốn plugin hoặc chủ đề của mình vượt qua vòng kiểm tra

Hãy xem một ví dụ rất đơn giản trong ba bước. Chúng tôi sẽ chuyển từ một giải pháp tùy chỉnh sang sử dụng nền tảng AJAX trong WordPress mà không thực sự sử dụng chính AJAX để triển khai chính thức. Chúng tôi sẽ tạo nút một lần, nút này sẽ hiển thị nếu người dùng chưa nhấp vào nút đó hoặc nút này sẽ hiển thị "đã nhấp vào" nếu người dùng đã nhấp vào nút đó trước đó

Triển khai tùy chỉnh

Trước khi tiếp tục, chúng ta cần tìm hiểu xem làm cách nào để biết liệu người dùng có nhấp vào nút hay không. Nếu người dùng nhấp vào nút, chúng tôi sẽ tạo meta người dùng clicked_link với giá trị là “Có. ” Đây là một chức năng kiểm tra điều này cho chúng tôi

Đang tải ý chính dc0fea35f28541b8e92c107bc21df6b1

Bây giờ chúng ta có thể tạo giao diện người dùng. Nút sẽ hiển thị nếu người dùng chưa nhấp vào nó (nó sẽ chỉ hiển thị với người dùng đã đăng nhập). Nếu người dùng đã nhấp vào nó, dòng chữ “Đã nhấp” sẽ được hiển thị

Đang tải ý chính a16be86029a4d15d7456d0605fbde42c

Khi người dùng nhấp vào nút, trang sẽ được tải lại với chuỗi truy vấn button_click. Dựa trên giá trị này, chúng tôi có thể sử dụng một hành động để đặt meta người dùng

Đang tải ý chính 2218428320d94b9db7201e5905eb1363

Lưu ý rằng phương pháp này không được khuyến nghị vì một số lý do nhưng nó dùng làm bằng chứng về khái niệm. Tại thời điểm này, nút sẽ hiển thị cho những người dùng đã đăng nhập nhưng chưa nhấp vào nút đó. Khi bạn nhấp vào nó, bạn được chuyển hướng đến cùng một trang. Ngay trước khi nút được tải, meta người dùng được ghi lại và kết quả là văn bản "Đã nhấp" chính xác được hiển thị

Nền tảng AJAX không có AJAX

Hãy đưa ví dụ này tiến một bước gần hơn đến việc triển khai AJAX. Chúng tôi đã có thể sử dụng các chức năng mà WordPress cung cấp mà không cần thực sự viết bất kỳ Javascript nào. Điều này liên quan đến việc định tuyến các hành động của chúng ta thông qua admin-ajax.php. Kết quả là chúng ta hãy xem mã cho nút của chúng ta thay đổi như thế nào

Đang tải ý chính b76131620e17fe0f91c1e3dfe93b5633

Thay đổi duy nhất là trong URL của nút. Nó trỏ đến tệp admin-ajax.php trong thư mục quản trị viên WordPress. Ngoài ra, một tham số hành động được chỉ định với giá trị của button_click. Chúng tôi không thể viết các chức năng để xử lý các hành động của mình vào tệp này vì đây là tệp cốt lõi của WordPress. Tuy nhiên, chúng ta có thể sử dụng các hành động để liên kết chúng với những sự kiện này

Đang tải ý chính 755284260700536b3fdaa2a5f24571d8

Để liên kết một chức năng với một hành động trong tệp admin-ajax.php, chúng ta cần sử dụng các móc nối wp_ajax_[action] hoặc wp_ajax_nopriv_[action]. Cái trước chỉ được kích hoạt cho người dùng đã đăng nhập, cái sau chỉ dành cho người dùng đã đăng xuất. Đây đã là một cách tuyệt vời để bảo vệ tập lệnh của chúng tôi

Lưu ý rằng tôi cũng đã viết lại hàm user_clicked() để tạo điều kiện thuận lợi cho các thay đổi. Chúng tôi không còn cần kiểm tra xem người dùng đã đăng nhập hay chưa vì điều đó đã được xử lý bởi móc nối wp_ajax_button_click. Tuy nhiên, chúng tôi cần chuyển hướng người dùng trở lại trang trước

Triển khai AJAX đầy đủ

Việc triển khai AJAX đầy đủ của chúng tôi sẽ sử dụng nền tảng mà chúng tôi đã xây dựng trong ví dụ trước. Hãy bắt đầu bằng cách viết một số Javascript, sẽ xử lý sự kiện nhấp vào nút

Đang tải ý chính 7957d65a7c5eb5bfc5fa03782f904be4

Chúng tôi phát hiện nút bấm và sử dụng chức năng button_click0 để gửi yêu cầu đến tệp admin-ajax.php. Chúng tôi đảm bảo rằng loại yêu cầu là button_click2 và hành động cũng được đưa ra. Các phần tử của đối tượng dữ liệu sẽ được vận chuyển dưới dạng các thành viên của mảng button_click3. Chức năng thành công được đưa vào, chức năng này sẽ thay thế nút bằng văn bản đã được nhấp nếu phản hồi là “OK. ”

Tài khoản WPMU DEV MIỄN PHÍ

Quản lý các trang web WP không giới hạn miễn phí

Nhập email của bạn

Đăng kí miễn phí

trang web không giới hạn

Không cần thẻ tín dụng

Lưu ý rằng từ quan điểm của tệp admin-ajax.php, yêu cầu này giống như khi chúng tôi trực tiếp đưa người dùng của mình đến tệp. Hành động được thiết lập và do đó hook của chúng ta trước đó sẽ hoạt động theo cách tương tự

Đang tải ý chính 922891f3bfc7949af542b2822eaeafc6

Lần này, chúng tôi không cần chuyển hướng người dùng vì họ sẽ không rời khỏi trang ngay từ đầu. Chúng ta cần lặp lại “OK,” sẽ được sử dụng bởi chức năng thành công của chúng ta và chúng ta cần button_click5. Điều này là bắt buộc vì tệp admin-ajax.php sẽ lặp lại "0" nếu không

Khi người dùng nhấp vào nút, mọi thứ được xử lý không đồng bộ. Người dùng có thể tiếp tục sử dụng trang web trong khi hành động này đang diễn ra. Nút cuối cùng (khá nhanh) sẽ được thay thế bằng văn bản được nhấp. Nếu người dùng tải lại trang, họ sẽ không thấy lại nút này vì họ đã nhấp vào nút đó

Triển khai AJAX với dự phòng

Phương pháp AJAX mới của chúng tôi rất tuyệt vời nhưng cuối cùng sẽ thất bại nếu người dùng không bật Javascript. Công bằng mà nói, nó sẽ hoạt động, nhưng nó sẽ không chuyển hướng người dùng quay lại trang họ đang truy cập vì chúng tôi lặp lại “0” và sau đó chết. WordPress cung cấp hằng số button_click7 mà chúng ta có thể sử dụng để xác định xem có yêu cầu AJAX hay không. Nếu đúng thì chúng ta lặp lại và chết, nếu không thì chúng ta chuyển hướng

Đang tải ý chính c02f1a920aaedbbef6ed0cbacb268330

Bằng cách sử dụng phương pháp này, chúng tôi có thể sử dụng các chức năng giống nhau và cùng quy trình làm việc để xử lý các tình huống khi Javascript được bật và các tình huống không bật Javascript

Tải kết quả tìm kiếm trên trang web của bạn với AJAX

Hãy sửa đổi chủ đề Twenty Fourteen để tải kết quả tìm kiếm bằng AJAX trên trang tìm kiếm. Bước đầu tiên là tạo một chủ đề con. Hãy xem bài viết của chúng tôi về cách tạo Chủ đề con WordPress để biết thêm thông tin

Enqueueing tài sản

Tiếp theo, hãy liệt kê tệp javascript mà chúng ta sẽ sử dụng để triển khai chức năng Javascript của mình. Lưu ý rằng tôi sẽ đảm bảo rằng tập lệnh chỉ được tải trên trang tìm kiếm. Lý do cho điều này là trang tìm kiếm có thể có thanh bên khác với trang danh sách bài đăng thông thường. Vì vậy, khi người dùng tìm kiếm lần đầu tiên, trang tìm kiếm sẽ thực sự tải. Khi ở trên trang tìm kiếm, kết quả sẽ được đưa vào thông qua AJAX

Đang tải ý chính 62ab55b644046b5389afd28ecac94ea0

Tôi đã sử dụng chức năng button_click8 để đảm bảo rằng tôi có quyền truy cập vào vị trí của tệp admin-ajax.php của chúng tôi. Trước đây, điều này có thể được lấy từ URL của nút của chúng tôi, nhưng chúng tôi không có cách nào để lấy nó từ trang ở đây

Chức năng button_click8 có thể được sử dụng để thêm hỗ trợ ngôn ngữ cho tập lệnh của bạn. Đó cũng là một cách tuyệt vời để chuyển các biến cho nó, đó là cách tôi đã sử dụng nó ở đây. Điều này sẽ cho phép chúng tôi sử dụng admin-ajax.php1 để trỏ đến đúng URL trong Javascript của chúng tôi

Tôi cũng đã thêm một tệp CSS vào hàng đợi. Mã CSS tối thiểu mà chúng tôi sẽ sử dụng rất có thể được thêm vào biểu định kiểu của chủ đề con. Tôi đã chọn liệt kê một tệp chuyên dụng chỉ đơn giản là để phân chia nội dung của chúng tôi, cuối cùng thì việc tạo plugin từ tệp đó sẽ dễ dàng hơn

chặn tìm kiếm

Bước tiếp theo là chặn các tìm kiếm, ngăn chặn chúng theo dõi và chuyển truy vấn tìm kiếm tới tập lệnh tùy chỉnh của chúng tôi, tập lệnh này sẽ trả về kết quả mới. Hãy thiết lập Javascript cho điều đó ngay bây giờ

Đang tải ý chính 25de5c1ca5610a616838e0a006335be6

Tôi đã sử dụng sự kiện admin-ajax.php2 để thêm lớp tải vào thành phần nội dung và tắt đầu vào. Điều này sẽ cung cấp cho người dùng một số phản hồi và đảm bảo rằng nhiều tìm kiếm không dẫn đến nhiều yêu cầu được gửi. Sau khi thành công, nội dung của phần tử admin-ajax.php3 được thay thế bằng kết quả mới

CSS mà chúng tôi sẽ sử dụng để xử lý tải như sau, CSS này sẽ làm mờ nội dung và tạo lớp phủ tải đẹp mắt

Đang tải ý chính 61ff20d188e597abc32cad26f9ed3f42

Và đây là giao diện người dùng trông như thế nào

Phía máy chủ

Hành động của chúng tôi từ cuộc gọi Javascript của chúng tôi là admin-ajax.php4. Chúng tôi sẽ cần sử dụng điều này trong các hành động mà chúng tôi sẽ tạo. Lần này, chúng tôi sẽ cần đảm bảo rằng nó chạy cho cả người dùng đã đăng nhập và đăng xuất, vì vậy chúng tôi sẽ sử dụng cả admin-ajax.php5 và admin-ajax.php6

Chúng tôi sẽ tạo một truy vấn WordPress tùy chỉnh và sử dụng cùng một mã được tìm thấy trong admin-ajax.php7 trong Twenty Fourteen để trả về kết quả của chúng tôi

Đang tải ý chính 74ea260942b5c11414eada7e60962404

Kết quả của chức năng này là một số HTML, được tạo bằng các chức năng có nguồn gốc từ WordPress và Twenty Fourteen. Điều này đảm bảo rằng chúng tôi sẽ nhận được định dạng chính xác mọi lúc, ngay cả khi không tìm thấy bài đăng nào

Sự kết luận

Từ những cải tiến giao diện người dùng nhỏ đến tăng hiệu suất quy mô lớn hơn, AJAX là một bổ sung tuyệt vời cho bộ công cụ WordPress của bạn. Khi bạn gặp nó lần đầu tiên, bạn có thể cần phải thử để hiểu nó, nhưng nó thực sự rất đơn giản. Đó là sự phức tạp có thể được thêm vào bởi Javascript phức tạp ở mặt trước và PHP phức tạp ở phía máy chủ, điều này đôi khi gây khó khăn hơn một chút, chứ không phải chính AJAX

Nếu bạn quan tâm đến chức năng AJAX, tôi thực sự khuyên bạn nên duyệt qua các plugin liên quan đến AJAX có sẵn trong Kho lưu trữ plugin WordPress. Tôi cũng khuyên bạn nên đọc Hướng dẫn AJAX của W3Schools và tài liệu về Hàm jQuery Ajax

Nếu bạn đã tạo ra thứ gì đó tuyệt vời bằng cách sử dụng AJAX trong WordPress hoặc bạn cảm thấy rằng một số khía cạnh của WordPress sẽ được hưởng lợi rất nhiều từ việc thêm một số AJAX vào chúng, hãy cho chúng tôi biết trong phần nhận xét bên dưới

• ajax
• bình luận

Chia sẻ bài viết này

Daniel Pataki Daniel là CTO tại Kinsta và đã viết cho nhiều ấn phẩm nổi bật như WPMU DEV và Smashing Magazine. Trong thời gian rảnh rỗi, bạn sẽ thấy anh ấy chơi các trò chơi cờ bàn hoặc lên kế hoạch cho trò chơi văn phòng tuyệt vời tiếp theo như Megaball không phá hoại chút nào.

Pixel của DEV

Xây dựng doanh nghiệp WordPress tốt hơn

Bắt đầu dùng thử miễn phí 7 ngày

Theo chúng tôi

Liên kết tới Facebook của WPMU DEV Liên kết tới Twitter của WPMU DEV Liên kết tới LinkedIn của WPMU DEV Liên kết tới WPMU

Bài viết liên quan và gần đây nhất

Cải thiện Giao diện của Nhận xét Tác giả của bạn

Cách di chuyển nhận xét WordPress từ bài đăng này sang bài đăng khác

Nhận xét WordPress. Hướng dẫn toàn diện về tạo kiểu và kiểm duyệt thảo luận

Cách chọn nhà cung cấp dịch vụ tên miền phù hợp

Các dự án liên quan

chim ruồi chuyên nghiệp

Mọi thứ bạn cần để…

hậu vệ chuyên nghiệp

Thường xuyên quét bảo mật, lỗ hổng…

Smush Pro

Sự lựa chọn của người dùng, đoạt giải thưởng, và…

SmartCrawl Pro

Tăng PageRank của bạn và…

Nhận các bản cập nhật WP mới trực tiếp vào hộp thư đến của bạn.

Bằng cách nhấp vào đăng ký, tôi đồng ý nhận tin tức WP vui nhộn. P. S. Chúng tôi giữ email của bạn 100% riêng tư và không gửi thư rác. )

Việc sử dụng AJAX trong php là gì?

Làm cách nào để biết liệu AJAX của WordPress có hoạt động không?

Làm cách nào tôi có thể tạo mã AJAX trong WordPress?

Tại sao cho phép WP Admin Admin