Cách gửi biểu mẫu bằng ajax trong wordpress
|
Hôm nay, chúng tôi muốn chia sẻ với bạn Thiết lập Gửi biểu mẫu Ajax với WordPress. Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách gửi dữ liệu biểu mẫu trong wordpress ajax, hãy nghe đối với WordPress Gửi biểu mẫu mà không cần làm mới trang bằng jQuery, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để thực hiện. Trong bài đăng này, chúng ta sẽ tìm hiểu về Ví dụ bài đăng Jquery Ajax để gửi biểu mẫu AJAX trong WordPress với một ví dụ Show
Biểu mẫu Jquery Ajax Gửi bằng WordPressnội dung
Có những điều sau đây Đơn giản về biểu mẫu Giới thiệu về Ajax Gửi bằng PHP Thông tin đầy đủ với ví dụ và mã nguồn Cũng nên đọc phần này 👉 làm cách nào để tính tỷ lệ phần trăm trong php (tăng và giảm) từ 2 giá trị? Vì tôi sẽ giới thiệu Bài đăng này với ví dụ Làm việc trực tiếp để phát triển Gửi biểu mẫu bằng cách sử dụng Ajax, PHP và jQuery, vì vậy giao diện gửi biểu mẫu ajax của wordpress cho ví dụ này như sau bên dưới Phần HTML (Gửi dữ liệu bằng AJAX)Tạo biểu mẫu HTML để gửi dữ liệu với jquery AJAX Phần jQueryđơn giản tạo một tập tin js jQuery(document).ready(function($) {
$('.uploaded-form-data').on('submit', function(e) {
e.preventDefault();
var $form = $(this);
$.post($form.attr('action'), $form.serialize(), function(data) {
alert('This is data returned from the server ' + data);
}, 'json');
});
});
WordPress xử lý yêu cầu AJAXThiết lập Chức năng cốt lõi của WordPress để xử lý Yêu cầu AJAX jquery mà không cần làm mới trang add_action( 'wp_ajax_product_frm_action', 'product_frm_action' );
add_action( 'wp_ajax_nopriv_product_frm_action', 'product_frm_action' );
function product_frm_action() {
$response = array(
'error' => false,
);
if (trim($_POST['category']) == '') {
$response['error'] = true;
$response['error_message'] = 'Your Category is required';
// Exit here, for not processing further because of the error
exit(json_encode($response));
}
exit(json_encode($response));
}
Bảo mật WordPress với biểu mẫu Nonce jQuery Ajax GửiXác minh phía máy chủ WordPress add_action( 'wp_ajax_product_frm_action', 'product_frm_action' );
add_action( 'wp_ajax_nopriv_product_frm_action', 'product_frm_action' );
function product_frm_action() {
if (
! isset( $_POST['product_frm_nonce'] )
|| ! wp_verify_nonce( $_POST['product_frm_nonce'], 'custom_action_nonce')
) {
exit('The main HTML Products form is not valid');
}
// .. Some Onthor task Processing further
}
Hướng dẫn lập trình web Ví dụ với DemoĐọc
Cũng nên đọc phần này 👉 lọc bảng html bằng javascript - Tìm kiếm và lọc bảng bằng JavaScript Bản tóm tắtBạn cũng có thể đọc về AngularJS, ASP. NET, VueJs, PHP Tôi hy vọng bạn có ý tưởng về Gửi biểu mẫu Ajax đơn giản với WordPress.  pakainfo Tôi là Jaydeep Gondaliya , kỹ sư phần mềm, người sáng lập và người điều hành Pakainfo. Tôi là nhà phát triển toàn diện, doanh nhân và chủ sở hữu của Pakainfo. com. Tôi sống ở Ấn Độ và tôi thích viết các hướng dẫn và mẹo có thể giúp ích cho các nghệ nhân khác, một Blogger đam mê, những người thích chia sẻ nội dung thông tin về PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS và Bootstrap ngay từ giai đoạn đầu Cách khó khăn liên quan đến các tập lệnh jquery Ajax và PHP. lên cho nhiệm vụ? . Nhưng trước tiên, hãy kiểm tra thực tế một chút. Bạn có biết điều đầu tiên về lệnh gọi Ajax hoặc yêu cầu Ajax không? Làm thế nào về các khái niệm như bài viết phương pháp và trả về sai? . cách dễ dàng có thể tốt hơn Và chúng tôi đã có một số tin tức tuyệt vời. Nếu bạn chọn đúng trình tạo biểu mẫu WordPress, điều này có thể thực sự dễ dàng. Dễ dàng như đánh dấu vào một vài ô - hy vọng bạn có thể xử lý việc đó Formidable Forms là plugin Trình tạo biểu mẫu WordPress tốt nhất. Nhận nó miễn phí Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách nhanh chóng tạo một biểu mẫu và kết thúc bằng cách bật gửi biểu mẫu Ajax. Plugin của chúng tôi lựa chọn? Trước khi chúng tôi chỉ cho bạn các bước liên quan, hãy đảm bảo rằng bạn đang ở đúng nơi Ajax là gì?Bạn có muốn các biểu mẫu có thể được gửi mà không phải tải lại trang không? Ajax cho phép các ứng dụng web gửi và truy xuất dữ liệu từ máy chủ web mà không cần tải lại trang hoặc chuyển hướng đến trang mới Tất nhiên, cách thức hoạt động của Ajax là một câu hỏi hoàn toàn khác. Chỉ cần biết điều này. Formidable đã làm công việc khó khăn cho bạn Tại sao phải tạo biểu mẫu Ajax?Bạn có thể đã nghĩ đến điều gì đó, nhưng đây là một số lý do khác khiến bạn có thể muốn gửi biểu mẫu mà không cần làm mới trang
Bước 1. Cài đặt và kích hoạt Formidable FormsPhần này là dễ dàng như nó được. Truy cập trang định giá của chúng tôi và nhận gói Biểu mẫu ghê gớm mà bạn chọn. Nhân tiện, Formidable tuyệt vời cho tất cả các loại biểu mẫu - không chỉ những biểu mẫu Ajax này Bạn có thể dễ dàng thêm các biểu mẫu liên hệ đơn giản vào trang web của mình hoặc tạo các biểu mẫu nâng cao với các trường tải tệp lên, văn bản nút tùy chỉnh, nhiều biểu mẫu trang, v.v. Và tất cả các gói của chúng tôi đều đi kèm với bảo đảm hoàn lại tiền 100%, trong 14 ngày. Bạn còn chờ gì nữa? Bước 2. Tạo biểu mẫuĐiều tiếp theo chúng ta sẽ làm là tạo một biểu mẫu. Điều này được thực hiện dễ dàng với trình tạo biểu mẫu kéo và thả của chúng tôi. Hãy xem Thêm một số trường biểu mẫu bằng cách kéo và thả từ trái sang phải. Hiện tại, chỉ cần thêm một số trường cơ bản, như trường địa chỉ email và trường văn bản. Sau đó, nhấp vào Cập nhật ở góc trên cùng bên phải Bây giờ chúng ta hãy đi đến bước cuối cùng và quan trọng nhất Bước 3. Định cấu hình cài đặt biểu mẫu AjaxCàng xa càng tốt? . đánh dấu vào ba ô Chỉ cần làm điều này và biểu mẫu của bạn sẽ sẵn sàng cho mọi tình huống mà chúng tôi đã mô tả ở trên. Vâng - đó là nó Dưới đây là một chút bối cảnh về các tính năng này Tải và lưu trang trình tạo biểu mẫu với AjaxChúng tôi khuyên dùng tính năng này đặc biệt khi bạn có các biểu mẫu dài hoặc biểu mẫu nhiều trang Đây là cách nó hoạt động. thay vì làm mới toàn bộ trang khi bạn tải hoặc cập nhật biểu mẫu, biểu mẫu sẽ được tải và lưu bằng Ajax. Điều này cải thiện đáng kể thời gian tải Gửi biểu mẫu này với AjaxĐiều này là khá nhiều tự giải thích. Nó cho phép người dùng gửi biểu mẫu mà không cần phải làm mới trang Có một điều cần lưu ý. không thể gửi tệp tải lên, văn bản có định dạng và trường chữ ký qua Ajax Xác thực biểu mẫu của bạn trong thời gian thựcBạn không cần đợi cho đến khi biểu mẫu được gửi để xác thực dữ liệu biểu mẫu. Điều này có thể được thực hiện trong thời gian thực với Ajax. Các trường bắt buộc, định dạng điện thoại, định dạng email và định dạng số có thể được kiểm tra ngay trong trình duyệt của bạn như thế này kết thúcĐó thực sự là tất cả để có nó. Với biểu mẫu Ajax, bạn vẫn có thể thêm thông báo xác nhận, vì vậy bạn cũng có thể muốn chỉnh sửa thông báo đó trước khi xuất bản biểu mẫu của mình trên trang liên hệ Chúng tôi hy vọng hướng dẫn của chúng tôi đã truyền cảm hứng cho bạn. Chúc một ngày tốt lành - và nhớ kiểm tra lại blog Formidable để biết thêm các mẹo về biểu mẫu WordPress Bạn sẽ thực hiện cuộc gọi AJAX để gửi biểu mẫu như thế nào?Trả lời. Sử dụng jQuery $. Phương thức post()
. phương thức post() kết hợp với phương thức serialize() để gửi biểu mẫu bằng AJAX trong jQuery. Phương thức serialize() tạo chuỗi văn bản được mã hóa URL bằng cách tuần tự hóa các giá trị biểu mẫu để gửi. Chỉ "điều khiển thành công" được đánh số thứ tự thành chuỗi.
Gửi biểu mẫu AJAX trong WordPress là gì?Ajax, viết tắt của Javascript và XML không đồng bộ, là kỹ thuật lập trình JavaScript cho phép các nhà phát triển truyền dữ liệu mà không cần tải lại trang . Nó được sử dụng phổ biến nhất trong các biểu mẫu web cho phép người dùng gửi dữ liệu biểu mẫu mà không cần tải lại trang.
Làm cách nào chúng tôi có thể gửi biểu mẫu bằng AJAX mà không cần làm mới trang trong php?Các bước để tạo biểu mẫu gửi mà không cần làm mới trang bằng Ajax, jQuery và PHP . Tạo một trang biểu mẫu HTML Bao gồm Thư viện Bootstrap Bao gồm thư viện jQuery Xác thực biểu mẫu jQuery và phương thức AJAX Tạo một trang hành động AJAX Sự khác biệt giữa AJAX và gửi biểu mẫu là gì?Gửi biểu mẫu tiêu chuẩn sẽ gửi một yêu cầu HTTP mới (POST hoặc GET) và tải trang mới trong trình duyệt. Trong Ajax, dữ liệu được gửi đến máy chủ (POST hoặc GET) ở chế độ nền mà hoàn toàn không ảnh hưởng đến trang và phản hồi sau đó được javascript nhận ở chế độ nền, một lần nữa mà không ảnh hưởng đến trang |
