wp前端的ajax答案

【问题标题】：ajax in wp front endwp前端的ajax
【发布时间】：2014-06-15 06:23:42
【问题描述】：

我想在 wp 插件前端而不是管理页面中使用 ajax，我使用 wp_localize_script() 能够在前端访问 ajaxurl 它有效。这是我的ajax代码

$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 代码中的 post() 方法返回整个页面的 html 代码，而不是由 Province_districts() 函数回显的响应。

有人可以帮忙吗？

【问题讨论】：

标签： javascript ajax wordpress plugins

【解决方案1】：

你需要使用add_action ( 'wp_ajax_nopriv_province_districts', 'province_districts' );在前端使用AJAX。

编辑：在第 9 行的 map.js 中，您将发布到 ""，它解析为当前页面的相对 URL。如果你用naqdina_map.ajaxurl 替换它，你的代码就可以工作了。

【讨论】：

我添加了代码 add_action ( 'wp_ajax_nopriv_province_districts', 'province_districts' );它仍然无法正常工作。 ajax 响应是网站主页的整个 html 代码。
听起来您的 ajaxurl 变量不包含正确的值。这可能是一个范围界定问题，或者其他模糊的东西。你能链接到你正在开发的网站吗？
您在 map.js 文件中的代码已过期或不正确。检查 map.js 第 9 行 - 您没有在 POST 中使用 naqdina_map.ajaxurl。我已经相应地更新了我的答案。
naqdina_map.ajaxurl 给出 "naqdina.midsconsulting.com/wp-admin/ajax-admin.php" 我将 naqdina_map.ajaxurl 放在 $j.post();它仍然将我重定向到主页
是的，但是您的 map.js 文件没有引用该变量。

【解决方案2】：

问题解决了，我犯了一个荒谬的错误。
它是 admin-ajax.php 而不是 ajax-admin.php。
替换

wp_localize_script('naqdina_map_script','naqdina_map',array('ajaxurl'=>admin_url('ajax-admin.php')));

与

wp_localize_script('naqdina_map_script','naqdina_map',array('ajaxurl'=>admin_url('admin-ajax.php')));

解决了我的问题。

【讨论】：