【发布时间】：2020-02-05 08:20:42
【问题描述】：
我在使用 Wordpress 中的 AJAX 获取 HTML5 地理位置并使用 ajaxurl (admin-ajax.php) 输出到 Google Maps Embed 时遇到问题。
在包含ajaxurl (admin-ajax.php) 之前，此方法有效（单击<a ...>Allow Location</a>）并显示了带有经度和纬度的嵌入式谷歌地图）但我无法在不使用的情况下将经度和纬度变量传递给 php ajaxurl (admin-ajax.php)。我需要 PHP 中的变量，以便在其他函数/进程中使用它们。
更新
我根据@Parthavi-Patel 的建议更新了下面的代码。我没有通过包含$.ajax data { action: 'audp_locate_book_request', ... } 链接add_action( ..., 'audp_locate_book_request' );。下面的代码示例已更新为正确且可操作。
CUSTOM-PLUGIN.PHP
public function audp_locate_book() {
$post = get_post();
if ( is_single('book') || ( is_single() && 'book' == $post->post_parent ) ) {
wp_enqueue_script (
'audp_locate_book',
plugin_dir_url( __FILE__ ) . 'js/audp-locate-book.js',
array('jquery'),
$this->version, // (Plugin uses Bootstrap)
true
);
wp_localize_script(
'audp_locate_book',
'audp_locate_book_obj',
array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
);
}
}
public function audp_locate_book_request() {
if ( isset ( $_REQUEST ) ) {
print_r( $_REQUEST );
$longitude = $_REQUEST['longitude'];
$latitude = $_REQUEST['latitude'];
}
wp_die();
}
/**
* Plugin uses bootstrap template. Alternatively you just use:
* add_action( 'wp_enequeue_scripts, 'audp_locate_book' );
* & repeat for other functions.
*/
$this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'audp_locate_book' );
$this->loader->add_action( 'wp_ajax_audp_locate_book_request', $plugin_public, 'audp_locate_book_request'); // Logged In
$this->loader->add_action( 'wp_ajax_nopriv_audp_locate_bookt_request', $plugin_public, 'audp_locate_book_request'); // Not Logged In
AUDP-LOCATE-BOOK.JS
(function($){
$(function() {
jQuery('a#geolocate').click(initiate_geolocation);
// Initiate Geolocation
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(geolocation_query,geolocation_errors);
}
// Output Geolocation
function geolocation_query(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
$.ajax({
type: "POST",
url: audp_locate_book_obj.ajaxurl,
data: { action: 'audp_locate_book_request', longitude: position.coords.longitude, latitude: position.coords.latitude },
success: function(data) {
jQuery("a#geolocate").html("Location Recorded").attr("disabled", true);
jQuery("p#map").html('<iframe src="https://maps.google.com/maps?q=' + latitude + ',' + longitude + '&z=17&output=embed" width="100%" height="170" frameborder="0" style="border:0"></iframe>');
console.log("Log: " + longitude + " & " + latitude);
}
});
}
// Geolocation Errors
function geolocation_errors(error) {
switch(error.code) {
case error.PERMISSION_DENIED: alert("Location denied by user.");
break;
case error.POSITION_UNAVAILABLE: alert("Location could not be detected.");
break;
case error.TIMEOUT: alert("Location request timed out.");
break;
default: alert("Unknown error.");
break;
}
}
});
})(jQuery);
在 Chrome 控制台中，错误又回来了：
(x) POST: mydomain.com/wp-admin/admin-ajax.php [400]
send @ jquery.js?ver=1.12.4-wp:4
ajax @ jquery.js?ver=1.12.4-wp:4
geolocation_query @ audp-locate-book.js?ver=1.0.0:23
第 23 行指代：
23: $.ajax({
24: type: "POST",
25: url: audp_locate_book.ajaxurl,
... etc
SINGLE-POST-TYPE.PHP
<!-- Relevant Code -->
<a onClick="javascript:void(0);" id="geolocate" class="button primary expand" >Allow Location</a>
<p style="text-align: justify; font-size: 9.5pt;" id="map"></p> <!-- Map No Longer Shows Here -->
<!-- End Relevant Code -->
最终，我的目标是显示嵌入经度/纬度的谷歌地图，并将经度和纬度设为 PHP 变量（$longitude、$latitude），因为页面中的其他 php 函数需要它。
【问题讨论】：
标签： javascript jquery ajax wordpress