我的网站上有一个地图搜索页面。我可以用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);
}
}
我错过了什么?
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个步骤,您的大多数问题将完全避免,您的应用程序将更快,您的代码将更安全。