ajax - 快速加载ajax响应
问题描述
这是我为显示弹出窗口而创建的代码,它正在显示结果,但 ajax 加载需要 2.50 秒,您能帮我更快地加载响应吗?使用此代码将产品详细信息显示为弹出窗口,如 woocommerce 中的快速查看按钮我需要帮助的网站是https ://www.sagaraqua.in/saudibasket/我是 ajax 新手,所以请指导我
function pop_up() {?>
<div id="myModal" class="modal quick-view-modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="content">
</div>
</div>
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
z-index: 999;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
jQuery(document).ready(function ($) {
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Let's do the magic
// make sure to change #myBtn to read more button selector
$(document).on("click", "#myBtn", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
// get url
var url = $(this).attr('href');
var container = $('#myModal').find('.content');
var data = {
action: 'show_product',
url: url,
};
var baseurl="<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php";
var ajaxurl = baseurl + '';
$.post(ajaxurl, data, function(response) {
// display the response
// console.log(response);
$(container).empty();
$(container).html(response);
modal.style.display = "block";
});
});
});
</script>
<?php
}
add_action( 'wp_footer', 'pop_up' );
add_action('wp_ajax_show_product', 'show_product_callback_wp');
add_action( 'wp_ajax_nopriv_show_product', 'show_product_callback_wp' );
function show_product_callback_wp() {
$url = $_POST['url'];
$product_id = url_to_postid( $url );
// product content
$content_post = get_post($product_id);
$content = $content_post->post_content;
$output .= get_the_post_thumbnail( $product_id);
?>
<div class="row">
<div class="woocommerce-product-gallery col-sm-6">
<?php echo $output;?>
</div>
<div class="summary col-sm-6">
<?php
global $product;
$title .= get_the_title( $product_id);
$content = $content_post->post_content;
$_product = wc_get_product( $product_id );
$addtocart_url = '?add-to-cart='.$product_id;
$_product->get_regular_price();
$_product->get_sale_price();
$price = $_product->get_price();
$product = wc_get_product( $product_id );
$rating = $product->get_average_rating();
$count = $product->get_rating_count();
$sku = $_product->get_sku();
$stock = $_product->get_manage_stock();
$stqty = $_product->get_stock_quantity();
$ststatus = $_product->get_stock_status();
$term_list = wp_get_post_terms( $product_id , 'product_cat' );
?>
<h3><?php echo $title;?></h3>
<div class="container-rating"> <?php echo wc_get_rating_html( $rating, $count );?></div>
<span class="price">₹<?php echo $price;?></span>
<p><?php echo $content;?></p>
<?php
foreach ( $term_list as $term ) :
echo '<p><strong>Categories:</strong> ' . $term->name . '</p>';
endforeach;
if($sku != ""){
?>
<p class="sku"> <strong>Sku</strong> <?php echo $sku;?> </p>
<?php } ?>
<form action="<?php echo $addtocart_url; ?>" class="cart" method="post"
enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
class="button ajax_add_to_cart add_to_cart_button product_type_simple">Add to
Cart</button>
<a class="productbtn" href="<?php echo $url; ?>">View Product</a>
</form>
</div>
</div>
<?php
exit();
}
解决方案
推荐阅读
- android-studio - 将 Searchview 宽度设置为全宽
- c# - c#如何通过LINQ查询数据表
- amazon-web-services - 我们可以保留从 ec2 到 lightsail 的静态 ip
- url - 自定义 SCIM URL 的限制
- c# - 将回调方法转换为任务
- java - 当我与 String 的相等元素进行比较时出了什么问题
- kubernetes - 无法理解 DeploymentStatus 中的 availableReplicas、readyReplicas、availableReplicas
- python - Pygame每次我添加一个矩形它都会偏移它
- javascript - 遍历一个数字数组并在没有两个循环的情况下执行“数字”次?
- laravel - Laravel 资源路由参数未覆盖