Gửi biểu mẫu Ajax WordPress

WordPress cung cấp hỗ trợ đáng kinh ngạc để bạn làm việc với các lần gửi biểu mẫu trong ứng dụng của mình. Cho dù bạn thêm biểu mẫu trong khu vực quản trị viên hay khu vực công khai, cơ chế tích hợp với tập lệnh quản trị viên-bài đăng và quản trị viên-ajax sẽ cho phép bạn xử lý các yêu cầu biểu mẫu của mình một cách hiệu quả

Trong bài viết này, tôi sẽ chỉ cho bạn cách xử lý việc gửi biểu mẫu tùy chỉnh bằng API WordPress. Tôi sẽ hướng dẫn bạn quy trình thêm biểu mẫu tùy chỉnh trong khu vực quản trị của plugin, xử lý việc gửi biểu mẫu qua HTML cũng như yêu cầu AJAX và viết trình xử lý biểu mẫu bằng PHP để xác thực, làm sạch và xử lý biểu mẫu

Mặc dù tôi sẽ ở trong lĩnh vực quản trị viên của WordPress, nhưng các khái niệm tương tự được áp dụng khi làm việc với các biểu mẫu ở các khu vực công khai

Tôi cũng sẽ sử dụng các cấu trúc lập trình hướng đối tượng cho plugin; . Plugin thực hành có thể được tải xuống từ đây để theo dõi cùng với bài viết

Ghi chú. Bài viết này dành cho các nhà phát triển WordPress trung cấp cao cấp. Nó giả định rằng bạn có kiến ​​thức làm việc về HTML, JavaScript, jQuery, PHP và API Plugin WordPress. Nếu bạn muốn bồi dưỡng, tôi khuyên bạn nên đọc qua phần sau

• Phát triển WordPress cho người mới bắt đầu. Bắt đầu
• Phát triển WordPress cho người mới bắt đầu. Xây dựng plugin
• Javascript dành cho nhà phát triển WordPress. Sử dụng AJAX
• Phát triển WordPress nâng cao. Giới thiệu về lập trình hướng đối tượng

Trước tiên, hãy bắt đầu bằng cách tìm hiểu cơ chế WordPress tích hợp để xử lý yêu cầu đăng bài dạng thông thường

Gửi biểu mẫu với bài đăng của quản trị viên. php trong WordPress

Hàng loạt hook có sẵn trong WordPress cho phép bạn kiểm soát tuyệt vời luồng thực thi ứng dụng của mình. Điều này không khác gì khi xử lý các biểu mẫu. Tất cả những gì bạn cần là hook chính xác để 'hook into' và thêm trình xử lý biểu mẫu tùy chỉnh. Các móc để xử lý biểu mẫu tùy chỉnh có bản chất động, nghĩa là tên của móc một phần phụ thuộc vào bạn

Để xử lý các nội dung gửi chỉ liên quan đến biểu mẫu của bạn, bạn cần kiểm soát tốt hơn như minh họa bên dưới

Gửi biểu mẫu WordPress với bài đăng quản trị viên. php

Điều này được thực hiện bằng cách trỏ biểu mẫu gửi tới admin-post.php tệp nằm trong wp-admin directory of WordPress, and including a custom name for the action in the form. On doing so, WordPress will trigger two action hooks based on the logged in status of the user:

• admin_post_{$action} cho người dùng đã đăng nhập
• admin_post_nopriv_{$action} cho người dùng chưa đăng nhập

Trong đó $action là tên của hành động được chuyển qua biểu mẫu

Sau đó, bạn có thể sử dụng add_action để liên kết trình xử lý biểu mẫu PHP với các móc được kích hoạt, nơi bạn sẽ có toàn quyền kiểm soát để xử lý dữ liệu biểu mẫu với các biến $_GET và $_POST

Như bạn có thể đã đoán, mặc dù tên của nó, admin-post. php có thể xử lý các yêu cầu POST và GET cũng như các yêu cầu đối với khu vực quản trị viên và không phải quản trị viên của ứng dụng

Hãy cùng khám phá điều này với sự trợ giúp của plugin tùy chỉnh

Cấu trúc plugin hướng đối tượng

Mục tiêu của tôi ở đây là giúp bạn hiểu mọi thứ đằng sau việc xử lý biểu mẫu tùy chỉnh trong WordPress có và không có AJAX. Đối với bài viết này, tôi đã chuẩn bị một plugin tùy chỉnh mà bạn có thể tải xuống từ đây để làm theo. Tôi khuyên bạn nên mở nó trong một trình chỉnh sửa phù hợp và chỉ cài đặt nó trên thiết lập WordPress cục bộ

Tôi đã xây dựng plugin bằng cách sử dụng các phương pháp lập trình hướng đối tượng với sự trợ giúp của bản tóm tắt plugin. Điểm bắt đầu của bản soạn sẵn nằm trong số nhiều phương pháp hay nhất được liệt kê trong Sổ tay plugin WordPress. Chúng là một cách tuyệt vời để đảm bảo tính nhất quán giữa các plugin của bạn và giúp bạn tiết kiệm rất nhiều thời gian để viết mã tiêu chuẩn. Trong một khoảng thời gian, bạn thậm chí có thể viết bản soạn sẵn tùy chỉnh của riêng mình dựa trên tùy chọn mã hóa của bạn. Đó là những gì tôi đã làm

Plugin dựa trên mẫu plugin của riêng tôi, là một nhánh của dự án Trình tạo plugin WordPress gốc. Nó tương tự như dự án ban đầu ở nhiều khía cạnh nhưng cũng có hỗ trợ cho không gian tên và tự động tải. Bằng cách này, tôi không cần phải có các tiền tố duy nhất cho mọi lớp hoặc chức năng và không phải kết thúc với nhiều câu lệnh include và wp-admin0. Tuy nhiên, phiên bản PHP yêu cầu tối thiểu cho plugin của tôi là 5. 6. 0

Ghi chú. Nếu bạn không sử dụng không gian tên hoặc sử dụng mã thủ tục, bạn phải thêm tiền tố vào mọi thứ

Đây là cách plugin được cấu trúc trong phần phụ trợ

• wp-admin1 – chức năng cốt lõi của plugin
• wp-admin2 – chức năng liên quan đến khu vực quản trị
• wp-admin3 – chức năng liên quan đến các khu vực công cộng
• wp-admin4 – chức năng được chia sẻ giữa quản trị viên và giao diện người dùng

Cấu trúc plugin trong phần phụ trợ

Plugin có menu quản trị cấp cao nhất với hai mục menu cho các trang biểu mẫu

Cấu trúc menu quản trị của plugin

Để xem cách tôi thêm các trang menu quản trị, hãy xem phương pháp wp-admin5 trong wp-admin6 và phương pháp wp-admin7 trong wp-admin8 của plugin

Nếu bạn muốn biết thêm về cách thêm trang quản trị vào plugin của mình, hãy xem bài viết của chúng tôi về cách tạo trang quản trị WordPress tại đây

Thêm Biểu mẫu vào Trang quản trị của Plugin

Khi tôi thêm trang menu “Gửi biểu mẫu HTML” cho plugin, tôi cũng phải chỉ định lệnh gọi lại để tải nội dung trang. Đây là nơi biểu mẫu được thêm vào

Đang tải ý chính 0d941be9690067e0a33c14c130dd2ea6

Tuy nhiên, thay vì viết trực tiếp HTML theo phương thức wp-admin9, tôi đã sử dụng một tệp khác action0nằm trong action1 cho biểu mẫu HTML và tải nó trong hàm gọi lại như bên dưới

Đang tải ý chính 09f8b1fdd3f9fed98d05b3a5774e8655

Đây hoàn toàn là một sở thích mã hóa. Nó cho phép tôi giữ cho mã của mình có thể đọc được bằng cách tách HTML và không tạo ra sự khác biệt nào đối với đầu ra của biểu mẫu trên trang plugin

Biểu mẫu HTML trong trang quản trị của plugin

Hiểu bảo mật biểu mẫu, cấu trúc và gửi

Biểu mẫu đã được thêm ở trên có một trường chọn với danh sách thả xuống gồm những người dùng WordPress hiện có và hai trường văn bản để người dùng nhập vào. Tuy nhiên, ví dụ đơn giản này có rất nhiều điều xảy ra đằng sau hậu trường. Mã biểu mẫu bên dưới là tự giải thích, vì vậy hãy xem qua các yếu tố quan trọng

Đang tải ý chính 239e8e8e7581fa38b28c8658bc5f1e02

bảo mật mẫu

Điều quan trọng nhất cần ghi nhớ khi xử lý các biểu mẫu trong khu vực quản trị của WordPress là bảo mật. Bảo mật biểu mẫu của bạn bằng cách sử dụng kết hợp cả WordPress Nonces và action2. Trong ví dụ của tôi, tôi đã hạn chế nhập vào biểu mẫu với action3, tôi. e. biểu mẫu sẽ chỉ được tải nếu người dùng đã đăng nhập có khả năng action4

Tôi cũng đã tạo một nonce tùy chỉnh bằng cách sử dụng action5 và sau đó thêm nó dưới dạng trường biểu mẫu ẩn. Thay vào đó, bạn có thể sử dụng action6 để thêm trực tiếp. Đây là một bài viết tuyệt vời để hiểu chi tiết về Nonces

Cấu trúc biểu mẫu

Tôi đã thêm tiền tố vào tất cả các phần tử biểu mẫu bằng tên plugin để đảm bảo tính duy nhất. Đây lại là một tùy chọn mã hóa cá nhân, vì tôi có thể chắc chắn chỉ nhắm mục tiêu các phần tử biểu mẫu của mình thông qua JavaScript. Tôi cũng đã sử dụng thuộc tính HTML5 action7 để xác thực biểu mẫu cho trình duyệt

Kiểm tra biểu mẫu quản trị

Nộp mẫu

Việc gửi biểu mẫu được thực hiện tới admin-post.php bằng cách sử dụng hàm action9 thay vì mã hóa cứng URL. Khi WordPress nhận được biểu mẫu, nó sẽ tìm giá trị của trường action để kích hoạt móc biểu mẫu. Trong trường hợp của tôi, nó sẽ tạo ra móc admin_post_{$action}1. Nếu đó là một trang được mở cho công chúng xem, nó sẽ kích hoạt móc nối admin_post_{$action}2

Trình xử lý biểu mẫu cho yêu cầu POST

Ở giai đoạn này, nếu bạn gửi biểu mẫu, bạn sẽ được chuyển hướng đến một trang trống với URL trang được đặt thành quản trị viên-bài đăng. php. Điều này là do chưa có trình xử lý biểu mẫu nào để xử lý yêu cầu. Để xử lý yêu cầu, tôi đã đăng ký trình xử lý tùy chỉnh của mình admin_post_{$action}3 theo phương pháp wp-admin5 của admin_post_{$action}5 như thế này. admin_post_{$action}6

Nếu bạn đang sử dụng mã thủ tục, bạn chỉ cần làm admin_post_{$action}7

Đang tải ý chính bcc74fcdaf4b5b52157b7a19f2d29641

admin_post_{$action}8 là nơi tôi sẽ có toàn quyền truy cập vào dữ liệu biểu mẫu thông qua siêu toàn cầu $_POST hoặc $_GET. Như được hiển thị bên dưới, tôi đã thêm một điểm dừng vào lệnh gọi lại trong IDE của mình để chắc chắn rằng hook sẽ hoạt động như mong đợi

Kiểm tra đầu vào biểu mẫu với XDebug

Xác thực biểu mẫu và vệ sinh đầu vào

Trước khi thực hiện bất kỳ thao tác nào, bạn phải xác thực nonce và làm sạch đầu vào của người dùng đúng cách. Tôi đã sử dụng hàm admin_post_nopriv_{$action}1 để xác minh nonce và các hàm admin_post_nopriv_{$action}2 và admin_post_nopriv_{$action}3 để làm sạch đầu vào của người dùng có sẵn trong biến $_POST. Nếu xác minh nonce không thành công, người dùng sẽ nhận được thông báo lỗi khi máy chủ phản hồi, sử dụng chức năng WordPress admin_post_nopriv_{$action}4

Ghi chú. Tôi đã truy cập dữ liệu biểu mẫu bằng biến $_POST. Nếu tôi đã gửi biểu mẫu bằng cách sử dụng admin_post_nopriv_{$action}6, thay vào đó, tôi sẽ sử dụng biến toàn cục $_GET hoặc admin_post_nopriv_{$action}8

Chỉ khi tôi chắc chắn rằng mọi thứ đều theo thứ tự, tôi mới thực hiện thao tác WordPress như thêm meta người dùng cho người dùng đã chọn

Để biết thêm về khử trùng đầu vào, tôi khuyên bạn nên đọc qua WordPress Codex. Xác thực Vệ sinh và Thoát Dữ liệu Người dùng tại đây

Gửi phản hồi của máy chủ

Sau khi thực hiện các hoạt động của máy chủ, điều quan trọng là gửi phản hồi của máy chủ cho người dùng. Để làm điều này, trước tiên bạn cần chuyển hướng người dùng trở lại trang quản trị hoặc trang cung cấp một số phản hồi. Tôi đã chuyển hướng người dùng quay lại trang plugin và sử dụng WordPress admin_post_nopriv_{$action}9 để hiển thị phản hồi của máy chủ. Phản hồi của máy chủ trong ví dụ của tôi chỉ xuất biến $_POST dưới dạng thông báo của quản trị viên WordPress

Phản hồi của máy chủ từ trình xử lý biểu mẫu

Tăng cường tiến bộ

Ở giai đoạn này, tôi có một biểu mẫu đầy đủ chức năng trong khu vực quản trị của plugin WordPress của mình. Nó an toàn và gửi chính xác tới trình xử lý biểu mẫu của tôi, nơi dữ liệu đầu vào được làm sạch và cuối cùng, phản hồi của máy chủ hiển thị. Biểu mẫu sẽ hoạt động ngay lập tức trong tất cả các trình duyệt có hỗ trợ HTML5. Nhưng tôi có thể làm nhiều điều để cải thiện trải nghiệm người dùng, chẳng hạn như thêm hỗ trợ AJAX

Phương pháp thiết lập trải nghiệm người dùng ở mức cơ bản có sẵn trong tất cả các trình duyệt và sau đó thêm chức năng nâng cao cho các trình duyệt hỗ trợ nó được gọi là Nâng cao lũy tiến

Ghi chú. Tôi đã giả định rằng người dùng của tôi sử dụng các trình duyệt hiện đại có hỗ trợ HTML5. Tuy nhiên, nếu biểu mẫu phải được hiển thị trên trình duyệt cũ hơn, xác thực đầu vào HTML5 tích hợp cho các trường bắt buộc sẽ bị hỏng. Tôi có thể sử dụng là một trang web tuyệt vời mà bạn có thể sử dụng để so sánh các tính năng web khả dụng trên các trình duyệt và phiên bản trình duyệt

Gửi biểu mẫu với AJAX (admin-ajax. php) trong WordPress

AJAX trong WordPress được xử lý thông qua tệp $action0. Dưới đây là tổng quan về cách các biểu mẫu tùy chỉnh có thể được xử lý thông qua AJAX trong WordPress

Gửi biểu mẫu có hỗ trợ AJAX trong WordPress

Bạn sẽ nhận thấy rằng nó khá giống với cách các biểu mẫu được xử lý bằng cách sử dụng admin-post.php. Khi WordPress nhận được yêu cầu AJAX, nó sẽ tạo hai móc nối dựa trên hành động được cung cấp

• $action2 cho người dùng đã đăng nhập
• $action3 cho người dùng chưa đăng nhập

Trong đó $action là tên của hành động đã được thông qua

Thêm Hỗ trợ AJAX vào Biểu mẫu Plugin

Trang menu thứ hai của plugin “Gửi biểu mẫu Ajax” tải biểu mẫu được gửi qua yêu cầu AJAX. Nó được thêm vào trang menu theo cách tương tự như đã thảo luận trước đó và sử dụng tệp $action5 để tải nội dung biểu mẫu. Nếu bạn nhìn vào tệp này, bạn sẽ nhận thấy rằng nó gần giống với biểu mẫu trước đó với sự khác biệt duy nhất là giá trị của thuộc tính biểu mẫu $action6 và tiêu đề. Bây giờ tôi có thể xác định biểu mẫu này từ biểu mẫu kia, tôi chỉ có thể xử lý biểu mẫu thứ hai thông qua AJAX bằng JavaScript

Để thêm hỗ trợ AJAX, tôi đã thực hiện các bước sau

• Đã xử lý một tệp JavaScript để tải jQuery
• Trình xử lý sự kiện gửi jQuery đã sử dụng để ngăn việc gửi biểu mẫu thông thường
• Đã sử dụng $action7 để gửi biểu mẫu tới $action8 thay vì admin-post.php

Ghi chú. Nếu vì lý do nào đó, JavaScript bị tắt trong trình duyệt, jQuery hoặc AJAX cũng sẽ không khả dụng, nhưng biểu mẫu vẫn sẽ gửi bình thường. Điều này là do tôi đã để lại URL gửi biểu mẫu là admin-post.php trong biểu mẫu HTML

Sử dụng JavaScript và jQuery để đăng biểu mẫu

Đây là JavaScript mà tôi đã sử dụng để gửi biểu mẫu qua AJAX

Đang tải ý chính 49b17f18fac9c7d82d1357a92c375f2a

add_action1 là thứ thực sự ngăn cản việc gửi biểu mẫu thông thường

Tôi đã thu thập dữ liệu biểu mẫu bằng hàm add_action2 của jQuery nhưng có nhiều cách khác để thực hiện việc này. Một trong số họ đang sử dụng giao diện FormData của HTML5. Nó nằm ngoài phạm vi của bài viết này nhưng nó chắc chắn đáng xem

add_action3

Tôi cũng đã thêm các tham số URL bổ sung vào dữ liệu được tuần tự hóa, để sau này tôi có thể phân biệt giữa yêu cầu AJAX và yêu cầu thông thường trong trình xử lý biểu mẫu PHP

add_action4

Thông thường, tiêu đề HTTP add_action5 được thư viện AJAX tự động đặt thành add_action6. Điều này cũng có thể được sử dụng để xác định một yêu cầu AJAX nhưng nó không phải lúc nào cũng đáng tin cậy

Phương thức ajax() của jQuery sẽ gửi yêu cầu đến máy chủ

Đang tải ý chính 2587280ad84bcfe0681afb2400edbbe9

Để có được biểu mẫu để gửi tới $action8, tôi đã sử dụng một mảng add_action8 được chuyển vào từ PHP bằng cách sử dụng add_action9

Ghi chú. Dữ liệu biểu mẫu trong ví dụ của tôi bao gồm action mà WordPress sẽ sử dụng để tạo móc nối cho yêu cầu AJAX. Các móc sau sẽ được kích hoạt bởi WordPress

• $_GET1 cho người dùng đã đăng nhập
• $_GET2 cho người dùng chưa đăng nhập

Tệp JavaScript được xử lý theo phương pháp $_GET3 của $_GET4 như bên dưới

Đang tải ý chính 4cd18ea93b6e350b2f2b6b98d5704080

Biến toàn cục ajaxurl

Bạn cũng có thể sử dụng biến JavaScript toàn cục $_GET5 thay vì chuyển URL cho $action8 từ PHP. Tuy nhiên, biến chỉ khả dụng khi xử lý phần cuối của quản trị viên và không khả dụng khi xử lý AJAX trên giao diện người dùng

Tùy thuộc vào phản hồi từ máy chủ, các cuộc gọi lại lời hứa AJAX $_GET7 và $_GET8 sẽ thực thi tương ứng. Trong ví dụ của tôi, đối với một yêu cầu thành công, tôi đã thêm phản hồi vào vùng chứa $_GET9 trống $_POST0 là một phần trong HTML biểu mẫu của tôi. Cuối cùng, các trường được xóa bằng cách đặt lại biểu mẫu

Trình xử lý biểu mẫu cho yêu cầu AJAX

Tôi cũng đã đính kèm trình xử lý biểu mẫu tương tự admin_post_{$action}3 vào yêu cầu AJAX

Đang tải ý chính 44be03d3debe755dcaf39643fe68f30d

Và trong trình xử lý biểu mẫu, tôi đã sử dụng $_POST2 được đặt thủ công trong JavaScript để phân biệt giữa yêu cầu bình thường và yêu cầu AJAX

Đang tải ý chính c2ad8a743c9bb319484a46ff399a50b9

Xác thực yêu cầu AJAX bằng điểm dừng

Đó là nó. Với AJAX, phản hồi được hiển thị mà không cần tải lại hoặc chuyển hướng trang

Nếu JavaScript bị vô hiệu hóa hoặc không tải vì lý do nào đó, thì $_POST2 sẽ không hợp lệ và biểu mẫu sẽ gửi bình thường bằng cách bỏ qua khối mã AJAX dành riêng cho $_POST4

Bạn chắc chắn có thể làm nhiều hơn nữa để cải thiện trải nghiệm người dùng và tôi khuyên bạn nên đọc qua tài liệu API jQuery cho AJAX tại đây

Tài nguyên bổ sung

Chúng tôi đã bao phủ rất nhiều mặt đất ở đây. AJAX là một chủ đề khá rộng lớn và được triển khai theo nhiều cách. Dưới đây là một số ví dụ khác về việc sử dụng AJAX trong WordPress

• Đang tải các bài đăng WordPress một cách linh hoạt với AJAX
• Sử dụng AJAX với PHP trên trang web WordPress của bạn mà không cần plugin
• Cách sử dụng AJAX trong WordPress để tải kết quả tìm kiếm

Bạn có sử dụng các biểu mẫu tùy chỉnh trên trang web của mình không?

thẻ

• ajax
• phát triển

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

Aileen Javier

Aileen Javier Aileen có hơn 10 năm kinh nghiệm viết nội dung và tiếp thị nội dung. Cô ấy phụ trách các nhóm nội dung, lên lịch biên tập và quản lý các dự án. Cô ấy cũng viết blog, bản sao web, bài đăng trên phương tiện truyền thông xã hội và bản tin email cho các thương hiệu trong các ngành khác nhau.

Pixel của DEV

Shareable, fun, & free WP comics.Check them out

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

Take a quick tour

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ách thêm biểu mẫu đăng ký AJAX bật lên vào WordPress

Cách sử dụng AJAX với PHP trên trang web WordPress của bạn mà không cần plugin

Cách sử dụng AJAX trong WordPress để tải kết quả tìm kiếm

Thêm biểu mẫu liên hệ AJAX trượt mượt mà vào trang web WordPress của bạn

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…

Ảnh chụp chuyên nghiệp

Lập và lên lịch tăng dần…

Smush Pro

Sự lựa chọn của người dùng, đoạt giải thưởng, 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.

nhập địa chỉ email của bạn.

Đặt mua

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. )

Làm cách nào để gửi biểu mẫu bằng Ajax trong WordPress?

Làm cách nào để gửi biểu mẫu qua Ajax?

Sự khác biệt giữa Ajax và gửi biểu mẫu là gì?

Kích hoạt gửi biểu mẫu Ajax là gì?