Hướng dẫn wordpress ajax response 0 - phản hồi wordpress ajax 0

I am trying to get a response from ajax request in wordpress. But every time I am trying to do the request it gets 0 as the response. Below is my code in java script

$("#submit").click(function(e) {
 e.preventDefault();
var ajaxurl = '/WordPress/wp-admin/admin-ajax.php';
  alert(dataString);

$.post( ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

in the function.php

add_action('wp_ajax_my_action','data_insert');
add_action('wp_ajax_nopriv_my_action','data_insert');

function data_insert()
{

    echo "hello";

    die;

}

asked Sep 6, 2016 at 10:23Sep 6, 2016 at 10:23

3

Here you go:

JavaScript:

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

PHP:

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

answered Sep 6, 2016 at 10:40Sep 6, 2016 at 10:40

NomanNomanNoman

1,4102 gold badges18 silver badges38 bronze badges2 gold badges18 silver badges38 bronze badges

3

You have to localize your script file if you are using an external js file in order to call the AJAX in WordPress.

Suppose your js file is custom.js

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

Functions.php File

function my_enqueing_function() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() .'your_path_here/custom.js', array('jquery'), time(), true );
    //Localizing our custom-js script to be called using front_ajax
    wp_localize_script( 'custom-js', 'front_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) );
}

add_action('wp_ajax_my_action','data_insert');
add_action('wp_ajax_nopriv_my_action','data_insert');
function data_insert()
{
    echo "hello";
    wp_die;
}

Try the above. Should work.

answered Sep 7, 2016 at 8:07Sep 7, 2016 at 8:07

DpENDpENDpEN

4,0863 gold badges17 silver badges25 bronze badges3 gold badges17 silver badges25 bronze badges

WordPress có một cách độc đáo để xử lý Ajax. Nếu bạn thực hiện yêu cầu trực tiếp cho tệp PHP, thì bạn sẽ không tải phần còn lại của khung WordPress và nhiều chức năng cụ thể của WordPress sẽ không khả dụng cho bạn.

Nội dung chính ShowShow

• Đọc thêm về SmashingMag: on SmashingMag:
• Ajax là gì?
• Cách không sử dụng Ajax
• Cách thức hoạt động của Ajax trong WordPress
• Thực hiện Ajax trong WordPress
• Chuẩn bị gửi cuộc gọi Ajax
• Xử lý hành động mà không có JavaScript
• Thêm JavaScript vào hỗn hợp
• Sự kết luận
• Làm cách nào để nhận dữ liệu AJAX trong WordPress?
• Làm thế nào tôi có thể nhận được phản hồi từ cuộc gọi Ajax?
• Làm thế nào tôi có thể biết nếu WordPress Ajax đang hoạt động?
• Làm cách nào để nhận được phản hồi AJAX trong HTML?

Để truy xuất trang đó bằng hàm AJAX của JQuery, bạn chỉ cần sử dụng một số JavaScript tương tự như sau.$ .ajax ({url: 'test.html', kiểu dữ liệu: 'html'});$.ajax({ url: 'test.html', dataType: 'html' });

//for logged in users
add_action('wp_ajax_my_action', 'my_action_callback');
//for not logged in users
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

function my_action_callback() {
  //your function here
  exit; //always call exit at the end of a WordPress ajax function
}

WordPress có một cách độc đáo để xử lý Ajax. Nếu bạn thực hiện yêu cầu trực tiếp cho tệp PHP, thì bạn sẽ không tải phần còn lại của khung WordPress và nhiều chức năng cụ thể của WordPress sẽ không khả dụng cho bạn.

Nội dung chính Show

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    type : 'get', //or 'post'
    data : {
                action: 'my_action_callback'
            }
})
     .fail(function(r,status,jqXHR) {
         console.log('failed');
     });
     .done(function(r,status,jqXHR) {
        console.log('success');
     });

Đọc thêm về SmashingMag: on SmashingMag:

Ajax là gì?

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Cách không sử dụng Ajax

Thực hiện Ajax trong WordPress

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    type : 'get', //or 'post'
    data : {
                action: 'my_action_callback'
            }
})
     .fail(function(r,status,jqXHR) {
         console.log('failed');
     });
     .done(function(r,status,jqXHR) {
        console.log('success');
     });

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    type : 'get', //or 'post'
    data : {
                action: 'my_action_callback'
            }
})
     .fail(function(r,status,jqXHR) {
         console.log('failed');
     });
     .done(function(r,status,jqXHR) {
        console.log('success');
     });

Dưới đây là một ví dụ về việc thêm nhiều dữ liệu vào yêu cầu:

Sử dụng phương thức

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    type : 'get', //or 'post'
    data : {
                action: 'my_action_callback'
            }
})
     .fail(function(r,status,jqXHR) {
         console.log('failed');
     });
     .done(function(r,status,jqXHR) {
        console.log('success');
     });

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    type : 'get', //or 'post'
    data : {
                action: 'my_action_callback'
            }
})
     .fail(function(r,status,jqXHR) {
         console.log('failed');
     });
     .done(function(r,status,jqXHR) {
        console.log('success');
     });

$.ajax({
    url : '/wp-admin/admin-ajax.php',
    type : 'get', //or 'post'
    data : {
                action: 'my_action_callback'
            }
})
     .fail(function(r,status,jqXHR) {
         console.log('failed');
     });
     .done(function(r,status,jqXHR) {
        console.log('success');
     });

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Phương pháp

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Cái này thậm chí còn đơn giản hơn và mất ít mã hơn:

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

Hãy nhớ sử dụng

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Hy vọng điều đó sẽ giúp.

• 11 phút đọc
• WordPress, PHP, JavaScript

Mặc dù có một số cách để sử dụng Ajax trong WordPress-và tất cả đều là chính xác, nhưng theo nghĩa lỏng lẻo của từ-có một phương pháp mà bạn nên làm theo vì một vài lý do: WordPress hỗ trợ nó , nó rất hợp lý, và nó cung cấp cho bạn nhiều tùy chọn ngay lập tức.

Đọc thêm về SmashingMag: on SmashingMag:

• Các thuật ngữ thiết kế công nghiệp thiết kế web và các điều khoản web
• Tại sao Ajax không đủ
• Làm thế nào để trở thành một nhà phát triển WordPress hàng đầu
• Hướng dẫn dành cho người mới bắt đầu để tạo trang web WordPress
  

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

Ajax là gì?

AJAX là sự kết hợp của mã HTML, CSS và JavaScript cho phép bạn gửi dữ liệu đến một tập lệnh và sau đó nhận và xử lý phản hồi tập lệnh mà không cần tải lại trang.

Nếu bạn không quen thuộc với Ajax, tôi khuyên bạn nên tiếp tục đến cuối bài viết này và sau đó đọc bài viết Wikipedia trên Ajax, tiếp theo là một số hướng dẫn của Ajax. Đây là một trường hợp hiếm hoi khi tôi khuyên bạn nên đọc càng ít về nó càng tốt trước khi thử nó, bởi vì nó khiến tôi bối rối không biết gì; Và sự thật là, bạn sẽ hiếm khi tương tác với Ajax ở trạng thái RAW Raw của nó - bạn thường sẽ sử dụng những người trợ giúp như jQuery.

Nếu bạn đang tạo một trang trên trang web của mình, nơi người dùng có thể sửa đổi hồ sơ của họ, bạn có thể sử dụng AJAX để cập nhật hồ sơ người dùng mà không cần liên tục tải lại trang bất cứ khi nào họ gửi biểu mẫu. Khi người dùng nhấp vào nút, dữ liệu họ đã nhập vào biểu mẫu được gửi qua AJAX vào tập lệnh xử lý, lưu dữ liệu và trả về chuỗi dữ liệu được lưu. Sau đó, bạn có thể xuất dữ liệu đó cho người dùng bằng cách chèn nó vào trang.

Điều cần nắm bắt về Ajax là cách không khác biệt so với những gì bạn đã làm. Nếu bạn có biểu mẫu liên hệ, rất có thể biểu mẫu được đánh dấu bằng HTML, một số kiểu được áp dụng cho nó và tập lệnh PHP xử lý thông tin. Sự khác biệt duy nhất giữa điều này và AJAX là làm thế nào thông tin mà người dùng nhập vào tập lệnh và quay lại cho người dùng - mọi thứ khác đều giống nhau.

Để khai thác toàn bộ tiềm năng của AJAX và tận dụng tối đa bài viết này, bạn sẽ cần phải làm quen với JavaScript (JQuery sẽ đủ), cũng như HTML, CSS và PHP. Nếu kiến ​​thức JavaScript của bạn là một chút iffy, thì đừng lo lắng; Bạn vẫn có thể làm theo logic. Nếu bạn cần một tay, chỉ cần gửi một bình luận, và tôi sẽ cố gắng giúp đỡ.

Cách không sử dụng Ajax

Một phương pháp đã xuất hiện và tôi đã sử dụng bản thân mình trong những ngày xưa tồi tệ, là chỉ cần tải tệp wp-load.php ở đầu tập lệnh PHP của bạn. Điều này cho phép bạn sử dụng các chức năng WordPress, phát hiện người dùng hiện tại, v.v. Nhưng đây về cơ bản là một vụ hack và vì vậy không phải là chứng minh trong tương lai. Nó ít an toàn hơn và không cung cấp cho bạn một số tùy chọn tuyệt vời mà hệ thống WordPress thực hiện.

Cách thức hoạt động của Ajax trong WordPress

Bởi vì AJAX đã được sử dụng trong phần cuối của WordPress, nên về cơ bản, nó đã được thực hiện cho bạn. Tất cả những gì bạn cần làm là sử dụng các chức năng có sẵn. Hãy cùng xem xét quá trình nói chung trước khi lặn vào mã.

Mỗi yêu cầu AJAX đều đi qua tệp quản trị-ajax.php trong thư mục

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Mỗi yêu cầu cần cung cấp ít nhất một phần dữ liệu (sử dụng phương thức

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

Thêm một hàm vào móc đầu tiên có nghĩa là chức năng đó sẽ bắn nếu người dùng đăng nhập bắt đầu hành động. Sử dụng móc thứ hai, bạn có thể phục vụ cho người dùng đăng nhập riêng biệt.

Thực hiện Ajax trong WordPress

Hãy để xây dựng một hệ thống bỏ phiếu thô sơ như một ví dụ nhanh chóng. Đầu tiên, tạo một plugin trống và kích hoạt nó. Nếu bạn cần trợ giúp với phần này, hãy xem hướng dẫn về việc tạo một plugin. Ngoài ra, hãy tìm tập tin đơn.php chủ đề của bạn và mở nó.

Chuẩn bị gửi cuộc gọi Ajax

Hãy để tạo ra một liên kết cho phép mọi người đưa ra một ngón tay cái cho các bài viết của chúng tôi. Nếu người dùng đã bật JavaScript, nó sẽ sử dụng JavaScript; Nếu không, nó sẽ theo liên kết. Ở đâu đó trong tệp đơn.php của bạn, có lẽ gần tiêu đề bài viết, thêm mã sau:

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

Đầu tiên, hãy để Lôi kéo giá trị của khóa Meta

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

Chúng tôi cũng đã tạo ra một liên kết thông thường ở đây. B bit duy nhất là một nhúm của bảo mật, sử dụng không phải, để đảm bảo không có trò chơi xấu nào. Mặt khác, đây chỉ đơn giản là một liên kết trỏ đến tệp admin-ajax.php, với hành động và id của bài đăng mà người dùng được chỉ định dưới dạng chuỗi truy vấn.

Để phục vụ người dùng JavaScript, chúng tôi đã thêm một lớp

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

Xử lý hành động mà không có JavaScript

Nếu bạn nhấp vào liên kết này ngay bây giờ, bạn nên được đưa đến tập lệnh quản trị-ajax.php, sẽ xuất ra

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

Trong plugin của bạn, tạo một chức năng và thêm nó vào móc mới được tạo cho chúng tôi. Đây là cách: làm thế nào:

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

Trước hết, chúng tôi đã xác minh rằng Nonce để đảm bảo rằng yêu cầu là tốt đẹp và hợp pháp. Nếu đó là một trò chơi, chúng tôi chỉ cần ngừng chạy tập lệnh. Nếu không, chúng tôi tiếp tục và nhận số lượng phiếu bầu từ cơ sở dữ liệu; Đảm bảo đặt nó thành

$(document).ready(function() {
    $("#submit").click(function(e) {
        var demo = 'demo';
        var ajaxurl = '';
        data = { action: "data_insert", demo: demo};     
        $.ajax({
            url: ajaxurl,
            data: data,
            dataType: 'json',
            type: 'post',
            success: function(response) {
              console.log(response);  
            }
        });
    });    
});

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

Sử dụng chức năng

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

Tôi muốn tạo các mảng kết quả này cho tất cả các hành động vì chúng chuẩn hóa xử lý hành động, cung cấp cho chúng tôi thông tin gỡ lỗi tốt. Và, như chúng ta sẽ thấy trong một giây, cùng một mảng có thể được sử dụng trong các cuộc gọi AJAX và không phải Ajax, làm cho việc xử lý lỗi một cinch.

Mảng này là thô sơ. Nó chỉ chứa loại kết quả (lỗi hoặc thành công) và số lượng phiếu bầu. Trong trường hợp thất bại, số lượng phiếu bầu cũ được sử dụng (chiết khấu phiếu bầu của người dùng, vì nó không được thêm vào). Trong trường hợp thành công, chúng tôi bao gồm số lượng phiếu bầu mới.

Cuối cùng, chúng tôi phát hiện liệu hành động có được bắt đầu thông qua cuộc gọi AJAX hay không. Nếu vậy, chúng tôi sử dụng chức năng

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

Luôn kết thúc các tập lệnh của bạn với chức năng

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

add_action('wp_ajax_data_insert', 'data_insert');
add_action('wp_ajax_nopriv_data_insert', 'data_insert');
function data_insert() {
    $data = $_POST['demo'];
    echo json_encode($data);
    die();
}

Chức năng để xử lý người dùng đăng xuất rõ ràng là kém, nhưng nó chỉ có nghĩa là một ví dụ. Bạn có thể mở rộng trên nó bằng cách chuyển hướng người dùng đến trang đăng ký hoặc bằng cách hiển thị thông tin hữu ích hơn.

Thêm JavaScript vào hỗn hợp

Bởi vì chúng tôi đã xử lý hành động của người dùng bằng các phương thức thông thường, chúng tôi có thể bắt đầu xây dựng trong JavaScript. Nhiều nhà phát triển thích thứ tự này vì nó đảm bảo sự xuống cấp duyên dáng. Để hệ thống của chúng tôi sử dụng AJAX, chúng tôi sẽ cần thêm jQuery, cũng như mã JavaScript của riêng chúng tôi. Để làm điều này, theo phong cách WordPress, chỉ cần truy cập plugin của bạn và thêm các phần sau.

function my_enqueing_function() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() .'your_path_here/custom.js', array('jquery'), time(), true );
    //Localizing our custom-js script to be called using front_ajax
    wp_localize_script( 'custom-js', 'front_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) );
}

add_action('wp_ajax_my_action','data_insert');
add_action('wp_ajax_nopriv_my_action','data_insert');
function data_insert()
{
    echo "hello";
    wp_die;
}

Đây là cách WordPress bao gồm các tệp JavaScript. Đầu tiên, chúng tôi đăng ký tệp JavaScript, để WordPress biết về nó (vì vậy hãy đảm bảo tạo tệp và đặt nó ở đâu đó trong plugin). Đối số đầu tiên cho hàm

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

Bản địa hóa tập lệnh là không hoàn toàn cần thiết, nhưng đó là một cách tốt để xác định các biến cho tập lệnh của chúng tôi sử dụng. Chúng ta cần sử dụng URL của tệp admin-ajax.php, nhưng vì điều này là khác nhau đối với mỗi tên miền, chúng ta cần chuyển nó đến tập lệnh. Thay vì mã hóa cứng, hãy để sử dụng chức năng

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

Khi các tập lệnh của chúng tôi đã được đăng ký, chúng tôi thực sự có thể thêm chúng vào các trang của chúng tôi bằng cách giới thiệu chúng. Chúng tôi không cần phải tuân theo bất kỳ đơn đặt hàng cụ thể nào; WordPress sẽ sử dụng đúng thứ tự dựa trên các phụ thuộc.

Sau khi thực hiện xong, trong tệp javascript my_voter_script.js, dán mã sau:

function my_enqueing_function() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() .'your_path_here/custom.js', array('jquery'), time(), true );
    //Localizing our custom-js script to be called using front_ajax
    wp_localize_script( 'custom-js', 'front_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) );
}

add_action('wp_ajax_my_action','data_insert');
add_action('wp_ajax_nopriv_my_action','data_insert');
function data_insert()
{
    echo "hello";
    wp_die;
}

Hãy để trở lại với những điều cơ bản. Đây sẽ là thời điểm tốt cho những người trong chúng ta mới sử dụng Ajax để nắm bắt những gì đang diễn ra. Khi người dùng nhấp vào nút bỏ phiếu mà không cần sử dụng JavaScript, họ sẽ mở tập lệnh và gửi một số dữ liệu bằng phương thức

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Sử dụng dữ liệu này, hàm

$("#submit").click(function(e) {
 e.preventDefault();
$.post( front_ajax.ajaxurl, 
    {
        'action': 'my_action',
        'data':   'name'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

});

Trong ví dụ của chúng tôi, tất cả những gì xảy ra là bộ đếm phiếu bầu thay đổi giá trị của nó để hiển thị số lượng phiếu bầu mới. Trong thực tế, chúng ta cũng nên bao gồm một số thông điệp thành công để đảm bảo người dùng nhận được phản hồi rõ ràng. Ngoài ra, hộp cảnh báo cho một lỗi sẽ rất xấu xí; Hãy thoải mái điều chỉnh nó theo ý thích của bạn.

Sự kết luận

Điều này kết thúc hướng dẫn nhanh của chúng tôi về việc sử dụng Ajax trong WordPress. Rất nhiều chức năng vẫn có thể được thêm vào, nhưng điểm chính của bài viết này là chỉ ra cách thêm chức năng Ajax đúng vào các plugin. Tóm lại, bốn bước liên quan là:

1. Thực hiện cuộc gọi Ajax;
2. Tạo chức năng, sẽ xử lý các hành động;
3. Thêm hàm vào móc, được tạo động cho chúng tôi với tham số hành động;
4. Tạo người xử lý thành công khi cần thiết.

Như đã đề cập, hãy đảm bảo mọi thứ hoạt động tốt mà không cần JavaScript trước khi thêm nó, để trang web xuống cấp đúng cách cho những người đã vô hiệu hóa nó.

Hãy nhớ rằng, bởi vì chúng tôi đang sử dụng móc, chúng tôi cũng có thể buộc các hàm WordPress hiện có với các cuộc gọi AJAX của chúng tôi. Nếu bạn đã có một chức năng bỏ phiếu tuyệt vời, bạn có thể buộc nó vào sau khi thực tế bằng cách gắn nó vào hành động. Điều này và sự dễ dàng mà chúng ta có thể phân biệt giữa các trạng thái đã đăng nhập, làm cho hệ thống xử lý WordPress Ajax thực sự rất mạnh mẽ.

Làm cách nào để nhận dữ liệu AJAX trong WordPress?

Trong WordPress, chúng tôi gửi tất cả yêu cầu AJAX đến một URL chung, sau đó WordPress gọi phương thức tương ứng theo các tham số mà chúng tôi đã gửi với yêu cầu. Bạn có thể sử dụng chức năng admin_url ('admin-ajax.php') của WordPress để lấy URL này.use the admin_url( 'admin-ajax.php' ) function of WordPress to get this url.use the admin_url( 'admin-ajax. php' ) function of WordPress to get this url.

Làm thế nào tôi có thể nhận được phản hồi từ cuộc gọi Ajax?

Ajax - Phản hồi của máy chủ...

Tài sản OnReadyStateChange.Thuộc tính ReadyState giữ trạng thái của XMLHTTPrequest.....

Sử dụng chức năng gọi lại.Hàm gọi lại là một hàm được truyền dưới dạng tham số cho một hàm khác.....

Thuộc tính respessXML.....

Phương thức GetAllResponseHeaders ().....

Phương thức getResponseHeader () ..

Làm thế nào tôi có thể biết nếu WordPress Ajax đang hoạt động?

Để xem nếu yêu cầu hiện tại là yêu cầu AJAX được gửi từ thư viện JS (như jQuery), bạn có thể thử một cái gì đó như thế này: nếu (!) == 'xmlhttprequest') {// Đây là một yêu cầu ajax.}if( !empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ) { //This is an ajax request. }if( ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ) { //This is an ajax request. }

Làm cách nào để nhận được phản hồi AJAX trong HTML?

Để truy xuất trang đó bằng hàm AJAX của JQuery, bạn chỉ cần sử dụng một số JavaScript tương tự như sau.$ .ajax ({url: 'test.html', kiểu dữ liệu: 'html'});$.ajax({ url: 'test.html', dataType: 'html' });$. ajax({ url: 'test. html', dataType: 'html' });