Ajax 在 WordPress 中调用返回整个 HTML 页面作为响应
Ajax call within WordPress returning entire HTML page in response
最令人沮丧的是这段代码正在运行,然后突然开始返回 HTML 的整个页面,而不仅仅是下面模板中的 HTML 代码。
我正在调用一个 ajax 函数并向它传递一个如下所示的对象(console.log(data) 的结果):
这是我的 ajax 函数:
function mapResults (data) {
//console.log(data);
$.ajax({
type: 'post',
url: wp_ajax.wp_url,
data: {action: 'marker_in_viewport', resultsArray: data},
success: function(result) {
$('#map-results').html(result);
},
error: function(result) {
console.warn(result);
}
});
}
这是处理请求的 PHP 代码:
<?php
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');
function marker_in_viewport() {
$locationResults = $_POST['resultsArray'];
$posts = get_posts(array(
'post_type' => 'accommodation',
'post__in' => $locationResults,
));
?>
<?php
//require result template
//require_once ('map-results.php');
if( $posts ) { ?>
<?php foreach( $posts as $post ) {
$id = $post->ID;
$title = get_the_title($id);
$location = get_field('location', $id);
$permalink = get_permalink( $id );
$rooms_available_from = get_field('rooms_available_from', $id);
$gallery = get_field('gallery', $id);
?>
<div class="col-md-4 accom-results-cont pb-3">
<?php if ($gallery) : ?>
<a href="<?= $permalink; ?>" title="Learn more about <?= $title; ?>">
<div class="accom-results-img-cont">
<img class="img-fluid" src="<?= $gallery['url']; ?>" alt="An image of <?= $title; ?>" >
</div>
<?php endif; ?>
<div class="accom-results-data-cont pr-3 pt-3">
<?php if ( $title ) : ?>
<p class="results-title"><b><?= $title ?></b></p>
<?php endif; ?>
</div>
</a>
</div>
<?php } ?>
<?php } ?>
<?php wp_die(); ?>
<?php } ?>
在我的页面模板中,我有以下 div 我想要填充结果的地方:
<div id="map-results"class="row py-5"></div>
知道我做错了什么吗?
我修改了你的代码。试试下面的代码。
function mapResults (data) {
$.ajax({
type: 'post',
dataType : "json",
url: wp_ajax.wp_url,
data: {action: 'marker_in_viewport', resultsArray: data},
success: function(result) {
$('#map-results').html(result.data.html);
},error: function(result) {
console.warn(result);
}
});
}
您可以使用 ob_start()
和 ob_get_clean()
。
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');
function marker_in_viewport() {
$locationResults = $_POST['resultsArray'];
$posts = get_posts(array(
'post_type' => 'accommodation',
'post__in' => $locationResults
));
ob_start();
if( $posts ) { foreach( $posts as $post ) {
$id = $post->ID;
$title = get_the_title($id);
$location = get_field('location', $id);
$permalink = get_permalink( $id );
$gallery = get_field('gallery', $id);
$rooms_available_from = get_field('rooms_available_from', $id);
?>
<div class="col-md-4 accom-results-cont pb-3">
<a href="<?php echo $permalink; ?>" title="Learn more about <?php echo $title; ?>">
<?php if ( $gallery ) : ?>
<div class="accom-results-img-cont">
<img class="img-fluid" src="<?php echo $gallery['url']; ?>" alt="An image of <?php echo $title; ?>" >
</div>
<?php endif; ?>
<div class="accom-results-data-cont pr-3 pt-3">
<?php if ( $title ) : ?>
<p class="results-title"><b><?php echo $title; ?></b></p>
<?php endif; ?>
</div>
</a>
</div>
<?php } }
$html = ob_get_clean();
wp_send_json_success(array(
'html' => $html
));
}
有用的链接
不要使用 wp_die() 它返回 html,只使用 die()
经过大约一周的尝试,终于让这个工作起来了!!
这是我的 AJAX 里面的函数 js/script.js
$.ajax({
type: 'post',
//dataType: 'json',
url: map_ajax_obj.ajaxurl,
data: {action: 'marker_in_viewport', resultsArray: data, nonce: map_ajax_obj.nonce},
success: function(result) {
//console.log(result);
$('#map-results').html(result);
},
error: function(result) {
console.warn(result);
}
});
在我的 functions.php 文件中,我已经排队并本地化了我的 wp-admin.php 像这样
function load_req_scripts()
{
wp_register_script( 'custom-js-script', get_template_directory_uri() . '/js/script.js', array( 'jquery'), '', true);
wp_enqueue_script( 'custom-js-script' );
wp_localize_script(
'custom-js-script', //I think this is a dependancy on the above script though not entirely sure
'map_ajax_obj',
array (
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax_nonce')
)
);
}
add_action( 'wp_enqueue_scripts', 'load_req_scripts' );
require_once('ajax/accommodation-ajax.php'); //where to handle and return the data to the ajax call
这里是我住宿里的功能-ajax.php文件
<?php
function marker_in_viewport() {
$locationResults = $_POST['resultsArray'];
if (!empty($locationResults)) {
$posts = get_posts(array(
'post_type' => 'accommodation',
'post__in' => $locationResults
));
if( $posts ) {
foreach( $posts as $post ) {
$id = $post->ID;
$title = get_the_title($id);
$location = get_field('location', $id);
$permalink = get_permalink( $id );
$gallery = get_field('gallery', $id);
$rooms_available_from = get_field('rooms_available_from', $id);
?>
<div class="col-md-4 accom-results-cont pb-3">
<a href="<?php echo $permalink; ?>" title="Learn more about <?php echo $title; ?>">
<?php if ( $gallery ) : ?>
<div class="accom-results-img-cont">
<img class="img-fluid" src="<?php echo $gallery['url']; ?>" alt="An image of <?php echo $title; ?>" >
</div>
<?php endif; ?>
<div class="accom-results-data-cont pr-3 pt-3">
<?php if ( $title ) : ?>
<p class="results-title"><b><?php echo $title; ?></b></p>
<?php endif; ?>
</div>
</a>
</div>
<?php } //end for each
} //end if posts
} //end if not empty
else {
echo "No results found please search again!";
}
wp_die();
}
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');
至于为什么与我上面发布的内容相比现在可以使用,我不知道!!会不会是NONCE?尽管我没有使用它在 PHP 函数中进行身份验证。无论如何,希望下次我用 wordpress ajax 电话撞墙时,这对某人或我未来的自己有所帮助。
UPDATE 所以这再次停止为我工作,然后我意识到它在以管理员身份登录时工作,而不是为注销和所有其他用户工作。因为这是一个会员网站,所以我想阻止任何不是管理区域管理员的人。没有意识到这个函数也阻止了对 admin-ajax.php 文件的访问。这是重定向到主页,因此 AJAX 调用返回整个页面的原因 HTML.
所以我需要更新我的函数以包括:
&& ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX )
以下内容:
//block users from admin if not admin
function blockusers_wps_init() {
if ( is_admin() && ! current_user_can( 'administrator' ) && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
wp_redirect( home_url() );
exit;
}
}
add_action( 'init', 'blockusers_wps_init' );
最令人沮丧的是这段代码正在运行,然后突然开始返回 HTML 的整个页面,而不仅仅是下面模板中的 HTML 代码。
我正在调用一个 ajax 函数并向它传递一个如下所示的对象(console.log(data) 的结果):
这是我的 ajax 函数:
function mapResults (data) {
//console.log(data);
$.ajax({
type: 'post',
url: wp_ajax.wp_url,
data: {action: 'marker_in_viewport', resultsArray: data},
success: function(result) {
$('#map-results').html(result);
},
error: function(result) {
console.warn(result);
}
});
}
这是处理请求的 PHP 代码:
<?php
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');
function marker_in_viewport() {
$locationResults = $_POST['resultsArray'];
$posts = get_posts(array(
'post_type' => 'accommodation',
'post__in' => $locationResults,
));
?>
<?php
//require result template
//require_once ('map-results.php');
if( $posts ) { ?>
<?php foreach( $posts as $post ) {
$id = $post->ID;
$title = get_the_title($id);
$location = get_field('location', $id);
$permalink = get_permalink( $id );
$rooms_available_from = get_field('rooms_available_from', $id);
$gallery = get_field('gallery', $id);
?>
<div class="col-md-4 accom-results-cont pb-3">
<?php if ($gallery) : ?>
<a href="<?= $permalink; ?>" title="Learn more about <?= $title; ?>">
<div class="accom-results-img-cont">
<img class="img-fluid" src="<?= $gallery['url']; ?>" alt="An image of <?= $title; ?>" >
</div>
<?php endif; ?>
<div class="accom-results-data-cont pr-3 pt-3">
<?php if ( $title ) : ?>
<p class="results-title"><b><?= $title ?></b></p>
<?php endif; ?>
</div>
</a>
</div>
<?php } ?>
<?php } ?>
<?php wp_die(); ?>
<?php } ?>
在我的页面模板中,我有以下 div 我想要填充结果的地方:
<div id="map-results"class="row py-5"></div>
知道我做错了什么吗?
我修改了你的代码。试试下面的代码。
function mapResults (data) {
$.ajax({
type: 'post',
dataType : "json",
url: wp_ajax.wp_url,
data: {action: 'marker_in_viewport', resultsArray: data},
success: function(result) {
$('#map-results').html(result.data.html);
},error: function(result) {
console.warn(result);
}
});
}
您可以使用 ob_start()
和 ob_get_clean()
。
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');
function marker_in_viewport() {
$locationResults = $_POST['resultsArray'];
$posts = get_posts(array(
'post_type' => 'accommodation',
'post__in' => $locationResults
));
ob_start();
if( $posts ) { foreach( $posts as $post ) {
$id = $post->ID;
$title = get_the_title($id);
$location = get_field('location', $id);
$permalink = get_permalink( $id );
$gallery = get_field('gallery', $id);
$rooms_available_from = get_field('rooms_available_from', $id);
?>
<div class="col-md-4 accom-results-cont pb-3">
<a href="<?php echo $permalink; ?>" title="Learn more about <?php echo $title; ?>">
<?php if ( $gallery ) : ?>
<div class="accom-results-img-cont">
<img class="img-fluid" src="<?php echo $gallery['url']; ?>" alt="An image of <?php echo $title; ?>" >
</div>
<?php endif; ?>
<div class="accom-results-data-cont pr-3 pt-3">
<?php if ( $title ) : ?>
<p class="results-title"><b><?php echo $title; ?></b></p>
<?php endif; ?>
</div>
</a>
</div>
<?php } }
$html = ob_get_clean();
wp_send_json_success(array(
'html' => $html
));
}
有用的链接
不要使用 wp_die() 它返回 html,只使用 die()
经过大约一周的尝试,终于让这个工作起来了!!
这是我的 AJAX 里面的函数 js/script.js
$.ajax({
type: 'post',
//dataType: 'json',
url: map_ajax_obj.ajaxurl,
data: {action: 'marker_in_viewport', resultsArray: data, nonce: map_ajax_obj.nonce},
success: function(result) {
//console.log(result);
$('#map-results').html(result);
},
error: function(result) {
console.warn(result);
}
});
在我的 functions.php 文件中,我已经排队并本地化了我的 wp-admin.php 像这样
function load_req_scripts()
{
wp_register_script( 'custom-js-script', get_template_directory_uri() . '/js/script.js', array( 'jquery'), '', true);
wp_enqueue_script( 'custom-js-script' );
wp_localize_script(
'custom-js-script', //I think this is a dependancy on the above script though not entirely sure
'map_ajax_obj',
array (
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax_nonce')
)
);
}
add_action( 'wp_enqueue_scripts', 'load_req_scripts' );
require_once('ajax/accommodation-ajax.php'); //where to handle and return the data to the ajax call
这里是我住宿里的功能-ajax.php文件
<?php
function marker_in_viewport() {
$locationResults = $_POST['resultsArray'];
if (!empty($locationResults)) {
$posts = get_posts(array(
'post_type' => 'accommodation',
'post__in' => $locationResults
));
if( $posts ) {
foreach( $posts as $post ) {
$id = $post->ID;
$title = get_the_title($id);
$location = get_field('location', $id);
$permalink = get_permalink( $id );
$gallery = get_field('gallery', $id);
$rooms_available_from = get_field('rooms_available_from', $id);
?>
<div class="col-md-4 accom-results-cont pb-3">
<a href="<?php echo $permalink; ?>" title="Learn more about <?php echo $title; ?>">
<?php if ( $gallery ) : ?>
<div class="accom-results-img-cont">
<img class="img-fluid" src="<?php echo $gallery['url']; ?>" alt="An image of <?php echo $title; ?>" >
</div>
<?php endif; ?>
<div class="accom-results-data-cont pr-3 pt-3">
<?php if ( $title ) : ?>
<p class="results-title"><b><?php echo $title; ?></b></p>
<?php endif; ?>
</div>
</a>
</div>
<?php } //end for each
} //end if posts
} //end if not empty
else {
echo "No results found please search again!";
}
wp_die();
}
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');
至于为什么与我上面发布的内容相比现在可以使用,我不知道!!会不会是NONCE?尽管我没有使用它在 PHP 函数中进行身份验证。无论如何,希望下次我用 wordpress ajax 电话撞墙时,这对某人或我未来的自己有所帮助。
UPDATE 所以这再次停止为我工作,然后我意识到它在以管理员身份登录时工作,而不是为注销和所有其他用户工作。因为这是一个会员网站,所以我想阻止任何不是管理区域管理员的人。没有意识到这个函数也阻止了对 admin-ajax.php 文件的访问。这是重定向到主页,因此 AJAX 调用返回整个页面的原因 HTML.
所以我需要更新我的函数以包括:
&& ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX )
以下内容:
//block users from admin if not admin
function blockusers_wps_init() {
if ( is_admin() && ! current_user_can( 'administrator' ) && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
wp_redirect( home_url() );
exit;
}
}
add_action( 'init', 'blockusers_wps_init' );