Ajax wordpress cơ bản (basic ajax wordpress)

18/08/2020 07:21 1528

Việc sử dụng ajax trong wordpress là rất nhiều khi lập trình theme hay plugin. Sau đây mình xin gửi đến anh/chị các code phổ dụng để copy xài cho nhanh

Table of Contents

1.Code js

1.1 Ajax đơn giản

Xử lý các tác vụ đơn giản về text không liên quan đến upload file

$(document).on('submit', '#create-data-visitor-statistic', function(e){
				e.preventDefault();
				var submit_data = {
					action:	 'create_data_visitor_statistic',
					data: 		$(this).serialize()
				};
				console.log(submit_data);
				$.ajax({
					type: 'POST',
					url: '<?php echo admin_url('admin-ajax.php'); ?>',
					//url: kitimportelementor_vars.ajax_url, 
					data: submit_data,
					success: function ( response ) {
						console.log(response);
						if (response.success ) {
							$('.shop-container').html(response.data);
				location.reload();
						}
					}				
				});
			});

$(document).on('submit', '#create-data-visitor-statistic', function(e){

e.preventDefault();

var submit_data = {

action: 'create_data_visitor_statistic',

data: $(this).serialize()

};

console.log(submit_data);

$.ajax({

type: 'POST',

url: '<?php echo admin_url('admin-ajax.php'); ?>',

//url: kitimportelementor_vars.ajax_url,

data: submit_data,

success: function ( response ) {

console.log(response);

if (response.success ) {

$('.shop-container').html(response.data);

location.reload();

}

});

1.2 Ajax nâng cao

Nếu tác vụ nào có liên quan đến upload file thì xài theo cách này

$(document).on('click','section.alow-flowers-real-images form#js_activity_feed_form .edtCmt .boxemotion .motionsend .cmt_right #btnSendCmt',function(e){
				e.preventDefault();
				var content = $('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt textarea#content').val();
				if(content == ''){
					alert("Bạn chưa nhập nội dung!");
					$('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt textarea#content').focus();
					return false;
				}
				
				var form_data = new FormData();
				//File data
				var file_data = $('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt .boxemotion .motionsend input#hdFileCmtUpload')[0].files;
				console.log(file_data);
				for (var i = 0; i < file_data.length; i++) {
					form_data.append("images[]", file_data[i]);
				}
				var comment_data = $('section.alow-flowers-real-images form#js_activity_feed_form').serialize();
				form_data.append('comment_data',	 comment_data);
				form_data.append('action',	 'rcaot_send_comment');
				$(this).html('<i class="fa fa-spinner fa-spin "></i> Đang gửi');
				console.log(form_data);
				$.ajax({
					cache: false,
					contentType: false,
					processData: false,
					data: form_data,
					type: 'post',
					url: rcaot_object.ajax_url, 
					cache:false,
					dataType: 'JSON',
					success:function(response){
						console.log(response);
						if (response.success ) {
							alert("Đã tạo ảnh thực tế thành công!");
							$('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt .boxemotion .motionsend .cmt_right #btnSendCmt').html('Gửi');
							location.reload();
						}
					}
				});
			});

$(document).on('click','section.alow-flowers-real-images form#js_activity_feed_form .edtCmt .boxemotion .motionsend .cmt_right #btnSendCmt',function(e){

e.preventDefault();

var content = $('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt textarea#content').val();

if(content == ''){

alert("Bạn chưa nhập nội dung!");

$('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt textarea#content').focus();

return false;

}

var form_data = new FormData();

//File data

var file_data = $('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt .boxemotion .motionsend input#hdFileCmtUpload')[0].files;

console.log(file_data);

for (var i = 0; i < file_data.length; i++) {

form_data.append("images[]", file_data[i]);

}

var comment_data = $('section.alow-flowers-real-images form#js_activity_feed_form').serialize();

form_data.append('comment_data', comment_data);

form_data.append('action', 'rcaot_send_comment');

$(this).html(' Đang gửi');

console.log(form_data);

$.ajax({

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

url: rcaot_object.ajax_url,

cache:false,

dataType: 'JSON',

success:function(response){

console.log(response);

if (response.success ) {

alert("Đã tạo ảnh thực tế thành công!");

$('section.alow-flowers-real-images form#js_activity_feed_form .edtCmt .boxemotion .motionsend .cmt_right #btnSendCmt').html('Gửi');

location.reload();

}

});

2.Code php

add_action("wp_ajax_create_data", array($this, 'create_data' ) );
add_action("wp_ajax_nopriv_create_data", array($this, 'create_data' ) );
function create_data(){
//cac lenh xu ly o day
parse_str($_POST['data'],$output);
//$output sẽ là dữ liệu submit bằng serialize()
$results='';
wp_send_json_success($results);
}

add_action("wp_ajax_create_data", array($this, 'create_data' ) );

add_action("wp_ajax_nopriv_create_data", array($this, 'create_data' ) );

function create_data(){

//cac lenh xu ly o day

parse_str($_POST['data'],$output);

//$output sẽ là dữ liệu submit bằng serialize()

$results='';

wp_send_json_success($results);

}

3.Biểu tượng loading

<span class="fa fa-circle-o-notch fa-spin"></span>

1	<span class="fa fa-circle-o-notch fa-spin"></span>

Với vaydep_filter_custom là action và vaydep_filter_custom_ajax là function xử lý, chỉ cần thêm fa-spin là chúng ta sẽ có animate của icon đó ví dụ

<i class="fa fa-spinner fa-spin"></i>

1	<i class="fa fa-spinner fa-spin"></i>

Các bài viết khác có thể hữu ích với bạn

4. Spinner cho button wordpress

$(this).html('<span class="spinner is-active"></span> Kiểm tra');

1	$(this).html('<span class="spinner is-active"></span> Kiểm tra');

5. Function quản lý các ajax

function ajaxs(){
    $actions = array(
        //action => function
        'yesAreYouSureDeleteThisLicense' => 'yesAreYouSureDeleteThisLicense'
    );
    if($actions){
        foreach($actions as $action => $function){
            add_action("wp_ajax_".$action, array($this,$function));
            add_action("wp_ajax_nopriv_".$action, array($this,$function));
        }
    }
}

function ajaxs(){

$actions = array(

//action => function

'yesAreYouSureDeleteThisLicense' => 'yesAreYouSureDeleteThisLicense'

);

if($actions){

foreach($actions as $action => $function){

add_action("wp_ajax_".$action, array($this,$function));

add_action("wp_ajax_nopriv_".$action, array($this,$function));

}

6. Code Spinner Font Awesome 4.7

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Loading...

Loading...

Loading...

Loading...

Loading...

Code sử dụng file

function productSortBy(){
		//cac lenh xu ly o day
		parse_str($_POST['data'],$output);
		if($output['orderby'] == 'menu_order' || $output['orderby'] == 'price'){
			$order = 'ASC';
		}elseif($output['orderby'] == 'price-desc'){
			$order = 'DESC';
		}
		$posts_per_page = get_option('posts_per_page');
		$offset = ($output['paged'] - 1) * $posts_per_page;
		$results=array();
		$args = array(
			'post_type' => 'product',
			'posts_per_page' => $posts_per_page,
			'post_status' => 'publish',
			'offset' => $offset,
			'meta_key' => 'price_regular',
			'orderby' => 'meta_value_num',
			'order' => $order ,
		);
		$loadPosts =  new \WP_Query( $args );
		ob_start();
		if($loadPosts){
			while ( $loadPosts->have_posts() ){ 
				$loadPosts->the_post();
				include SHOPPIIBIZ_TEMPLATE_PARTS_DIR."product/partials/product-item-has-li.php";	
			}
			wp_reset_query();
		}
		$html = ob_get_clean();
		ob_end_clean();
		$results['html'] = $html;
		wp_send_json_success($results);
		
	}

function productSortBy(){

//cac lenh xu ly o day

parse_str($_POST['data'],$output);

if($output['orderby'] == 'menu_order' || $output['orderby'] == 'price'){

$order = 'ASC';

}elseif($output['orderby'] == 'price-desc'){

$order = 'DESC';

}

$posts_per_page = get_option('posts_per_page');

$offset = ($output['paged'] - 1) * $posts_per_page;

$results=array();

$args = array(

'post_type' => 'product',

'posts_per_page' => $posts_per_page,

'post_status' => 'publish',

'offset' => $offset,

'meta_key' => 'price_regular',

'orderby' => 'meta_value_num',

'order' => $order ,

);

$loadPosts = new \WP_Query( $args );

ob_start();

if($loadPosts){

while ( $loadPosts->have_posts() ){

$loadPosts->the_post();

include SHOPPIIBIZ_TEMPLATE_PARTS_DIR."product/partials/product-item-has-li.php";

}

wp_reset_query();

}

$html = ob_get_clean();

ob_end_clean();

$results['html'] = $html;

wp_send_json_success($results);

}

Các từ khóa tìm kiếm:
-Ajax wordpress cơ bản
-Sử dụng Ajax trong wordpress
-Simple WordPress Ajax Example
-How to call ajax in wordpress

4.8/5 (14 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Phân trang paginate cho wp_query wordpress [ 18/09/2022 14:17 ]
Function ghi vào file debug wordpress write log [ 16/09/2022 02:24 ]
Code bắt đầu viết một plugin [ 08/04/2022 09:54 ]
Get all current post type in wordpress website [ 11/08/2021 15:23 ]
Tạo child theme wordpress [ 09/05/2021 07:58 ]
2 cách để code login wordpress [ 22/03/2021 09:36 ]
Cho phép upload các loại file khác trong wordpress [ 24/09/2020 09:00 ]
Disable update wordpress core, plugin and theme [ 02/09/2020 01:19 ]
Wp_query cho woocommerce (wp_query for woocommerce) [ 18/08/2020 09:14 ]
Đăng ký post type ẩn (Register Hidden Custom Post Type) [ 10/09/2019 09:57 ]

Ajax wordpress cơ bản (basic ajax wordpress)

1.Code js

1.1 Ajax đơn giản

1.2 Ajax nâng cao

2.Code php

3.Biểu tượng loading

4. Spinner cho button wordpress

5. Function quản lý các ajax

6. Code Spinner Font Awesome 4.7

Code sử dụng file

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)