在通过AJAX显示帖子的同时填充地图

时间:2019-10-21 作者:Burgi

我的网站上有一个地图搜索页面。我可以用HTML显示列表中的所有位置,但我很难同时将这些位置传递给JavaScript,以便在我的Google地图上填充PIN。

我似乎只能wp_localize_script 处理初始页面加载和AJAX调用期间的工作。

这是我的javascript:

jQuery(document).on( \'submit\', \'#locationsearch\', function() {
    var form = jQuery(this);
    var input = form.find(\'input[name="postcode"]\');
    var query = input.val();
    var map=jQuery(\'#map\');
    var content = jQuery(\'#results\');

    jQuery.ajax({
        type : \'post\',
        url : myAjax.ajaxurl,
        data : {
            action : \'getStockistLocations\',
            query : query
        },
        beforeSend: function() {
            console.log(\'fetching\');
            input.prop(\'disabled\', true);
            content.addClass(\'loading\');
        },
        success : function( response ) {
            console.log(myAjax.locations);
            input.prop(\'disabled\', false);
            content.removeClass(\'loading\');
            map.removeClass(\'hide-map\');
            content.html( response );
        }
    });

    return false;
});
我的console.log(myAjax.locations) 不断返回“未定义”。

下面是我的PHP函数:

public function getStockistLocations(){
        $postcode = $_POST[\'query\'];

        $geocode=new Geocoder();
        $lnglat = $geocode->geocodePostcode($postcode);

        $results=$this->getStockists($lnglat);
        if( !empty($results) ) {
            wp_localize_script( \'main\', \'myAjax.locations\', $results );
            ob_start();
            foreach ($results as $result){
                global $locationresult;
                $locationresult=$result;

                get_template_part(\'template_parts/cards/card\',\'location\');
            }
            $content = ob_get_clean();

            echo $content;
        }

        die();
    }
我正在另一个类中本地化脚本:

protected function localizeScripts(){
        global $post;

        $mappages=[
            \'contact\',
            \'where-to-buy\',
            \'find-an-installer\'
        ];

            if(in_array($post->post_name,$mappages)){
                $payload=array(
                    \'url\'   =>  get_stylesheet_directory_uri(),
                    \'ajaxurl\'  =>  admin_url(\'admin-ajax.php\'),
                );

                wp_localize_script( \'main\', \'myAjax\', $payload );
                $key=$this->getAPIKeys(\'google\');
                wp_enqueue_script(\'gmap\',\'https://maps.googleapis.com/maps/api/js?key=\'.$key.\'&callback=initMap\',null,false,true);
        }
    }
我错过了什么?

1 个回复
SO网友:Tom J Nowell

看起来您已将本地化脚本附加到main 脚本,但不将main 脚本,您排队gmap.

我还注意到您使用的是遗留/过时的管理AJAX界面。您是否考虑过改用现代RESTAPI接口?

还要考虑AJAX应该返回原始数据。通过返回原始HTML,您将面临安全问题,并限制缓存的可能性。取回数据,然后使用JS在浏览器中生成标记

最后,你不能打电话wp_localize_script( \'main\', \'myAjax.locations\', $results ); 在AJAX响应中,这是没有意义的。本地化脚本会附加该数据,如果main 已排队,但将脚本或样式排队到AJAX请求中没有意义,因为没有打印出任何脚本或样式(您需要wp_head 调用它,这些也不属于AJAX请求)。

解决方法是将其放在脚本标记中,并将其分配给window, 但是,在浏览器端执行javascript需要特殊的处理,这使得前面提到的安全问题更加严重。

因此,取而代之的是:

从站点获取原始数据,而不是HTML,理想情况下是JSON编码的,在浏览器中用javascript生成UI,不要盲目接受PHP生成的任意大块HTML。通过这2个步骤,您的大多数问题将完全避免,您的应用程序将更快,您的代码将更安全。