阿贾克斯在WP前端 [英] ajax in wp front end

问题描述

我想用AJAX在WP插件前端而不是管理页面， 我用wp_localize_script（）能够访问ajaxurl在前端 和它的作品。 这是我的ajax code

I want to use ajax in wp plugin front end not the admin pages, I used wp_localize_script() to be able to access ajaxurl in front end and it works. Here is my ajax code

$j = jQuery.noConflict();

function commonProvinceChange() {

    $j(".province").change(function() {
       var selectedProvinceId = $j(this).val();
       var districts = "<option disabled selected='selected'>Select District</option>";
       $j.post(naqdina_map.ajaxurl, {
         province_id : selectedProvinceId,
         action : 'province_districts'
        }, function(data, status) {
          alert(naqdina_map.ajaxurl);
                            data = JSON.parse(data);
                            $j(".district").html(districts);
                            for ( var i = 0; i < data.length; i++) {
                                $j(".district").append(
                                        "<option value=" + data[i].id + ">"
                                                + data[i].district_name
                                                + "</option>");
                            }// for
                        });

                    });
}// commonProvinceChange()

和我的插件php文件

function naqdina_front_script() {

    wp_enqueue_script ( 'jquery' );

    wp_register_script ( 'naqdina_map_script', plugins_url ( 'naqdina_map/map.js', __FILE__ ), array (
            'jquery' 
    ) );
    wp_localize_script('naqdina_map_script','naqdina_map',array('ajaxurl'=>admin_url('ajax-admin.php')));
    wp_enqueue_script ( 'naqdina_map_script' );
}//naqdina_front_script()

add_action ( 'wp_enqueue_scripts', 'naqdina_front_script' );

然后

add_action ( 'wp_ajax_province_districts', 'province_districts' );

function province_districts() {

    global $wpdb;

        $province_id = $_POST ['province_id'];

    $pname = $wpdb->get_results ( "select d.id,d.name as district_name from naqdina_districts as d join naqdina_provinces as p on(d.province_id=p.id) where p.id='" . $province_id . "'" );

    echo json_encode ( $pname );
    die (); // use die() to prevent further content

} // province_districts()

在我这里的js code以上的回报HTML $ C $整个页面而不是由province_districts呼应的响应（）函数。

here the post() method in my js code above returns html code of the whole page not the the response echoed by province_districts() function.

有人能帮助??

推荐答案

您需要使用 add_action（'wp_ajax_nopriv_province_districts'，'province_districts'）; 使用AJAX的前端。

You need to use add_action ( 'wp_ajax_nopriv_province_districts', 'province_districts' ); to use AJAX in the frontend.

编辑： map.js 第9行，你要发布帖子，这样就解决了一个相对URL到当前页面。如果要更换与 naqdina_map.ajaxurl 您code会工作。

In map.js on line 9 you are POSTing to "" which resolves as a relative URL to the current page. If you replace that with naqdina_map.ajaxurl your code will work.

这篇关于阿贾克斯在WP前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！