jQuery的：制作一个Ajax调用请求一次 [英] jQuery: Making an Ajax call to be requested only once
本文介绍了jQuery的：制作一个Ajax调用请求一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用下面的code，以显示我的产品popover的效果。在popover的内容来自阿贾克斯。这是使用微博引导popovers 。是否有可能使Ajax调用一次？现在，我每次鼠标产品，请求再次发送。我想调整这个code所以如果内容已经被取出，使用它，并没有做出其他的要求。
感谢
$（文件）。就绪（函数（）{
//快速查看盒
VAR overPopup = FALSE;
$（一个[相对= popover]，.favorites'）。popover（{
触发：手动，
位置：'底'，
HTML：真正的，
内容：函数（）{
VAR div_id =DIV-ID-+ $。现在（）;
返回details_in_popup（div_id，$（本）的.data（产品ID'））;
}
}），鼠标悬停（功能（E）{
//上空盘旋时，其中有一个popover一个元素，隐藏
//它们除了当前在被徘徊
$（'[相对= popover]'）不是（'[数据唯一=+ $（本）的.data（'独特'）+']）popover（隐藏）。
变量$ popover = $（本）;
$ popover.popover（'秀'）;
$ popover.data（'popover）。尖端（）的mouseenter（函数（）{
overPopup = TRUE;
}）。鼠标离开（函数（）{
overPopup = FALSE;
$ popover.popover（隐藏）;
}）;
}）的mouseout（功能（E）{
//在鼠标移出按钮，关闭相关popover
// 200毫秒，如果你不将鼠标悬停在popover
变量$ popover = $（本）;
的setTimeout（函数（）{
如果（！overPopup）{
$ popover.popover（隐藏）;
}
}，200）;
}）;
}）;
功能details_in_popup（div_id，PRODUCT_ID）{
$阿贾克斯（{
网址：'index.php的路线=产品/产品/ get_product_ajax'，
类型：'后'，
数据：'PRODUCT_ID ='+ PRODUCT_ID，
数据类型：JSON，
成功：函数（JSON）{
如果（JSON ['成功']）{
$（'＃'+ div_id）。html的（JSON ['成功']）;
}
}
}）;
回报'＆LT; DIV ID =+ div_id +'＆GT;载入中...＆LT; / DIV＆GT;';
}
下面是我的HTML结构是这样的：
＆LT; DIV CLASS =形象＆GT;
＆LT;数据唯一=唯一-3的数据产品-ID =39相对=popover的href =链接到产品＆GT;
＆LT; IMG SRC =路径图像/＆GT;
＆所述; / a取代;
＆LT; / DIV＆GT;
更新：
谢谢大家的帮助和投入。这是我如何固定它：
函数details_in_popup（div_id，PRODUCT_ID）{
//我加了这个块
如果（$（＃popover_content_for_prod_+的product_id）.length）{
返回$（＃popover_content_for_prod_+的product_id）。html的（）;
}
$阿贾克斯（{
网址：'index.php的路线=产品/产品/ get_product_ajax'，
类型：'后'，
数据：'PRODUCT_ID ='+ PRODUCT_ID，
数据类型：JSON，
成功：函数（JSON）{
如果（JSON ['成功']）{
$（'＃'+ div_id）。html的（JSON ['成功']）;
//还增加了这一行
$（'身体'）追加（'＆LT; DIV的风格=显示：无;ID =popover_content_for_prod_'+的product_id +'＆GT;'+ JSON ['成功'] +'＆LT; / DIV＆GT;'） ;
}
}
}）;
回报'＆LT; DIV ID =+ div_id +'＆GT;载入中...＆LT; / DIV＆GT;';
}
解决方案
使用一个隐藏的元素AJAX调用之前存储布尔值并得到它然后设置它做的时候。
HTML：
＆LT; DIV ID =hiddenElement值=真的风格=显示：无;能见度：隐藏;＆GT;＆LT; / DIV＆GT;
记者：
变种一旦= $（hiddenElement）VAL（）。
如果（一次）{
$阿贾克斯（{
键入：POST，
网址：ajax.php行动= add_driver
数据类型：JSON，
日期：$（＃形式addDriver）serializeArray（）。
beforeSend：函数（）{
$（'错误，.success，.notice）删除（）。
}
}）。完成（功能（）{
$（＃hiddenElement）VAL（假）。
}）;
}
I'm using the following code to display a "popover" effect on my products. The content of the popover comes from Ajax. This is using Twitter Bootstrap popovers. Is it possible to make the Ajax call only once? Right now, every time I mouse over the product, the request is sent again. I'd like to tweak this code so if the content has already been fetched, use it and don't make another request.
Thanks
$(document).ready(function(){
//Quick view boxes
var overPopup = false;
$("a[rel=popover]", '.favorites').popover({
trigger: 'manual',
placement: 'bottom',
html: true,
content: function(){
var div_id = "div-id-" + $.now();
return details_in_popup(div_id, $(this).data('product-id'));
}
}).mouseover(function (e) {
// when hovering over an element which has a popover, hide
// them all except the current one being hovered upon
$('[rel=popover]').not('[data-unique="' + $(this).data('unique') + '"]').popover('hide');
var $popover = $(this);
$popover.popover('show');
$popover.data('popover').tip().mouseenter(function () {
overPopup = true;
}).mouseleave(function () {
overPopup = false;
$popover.popover('hide');
});
}).mouseout(function (e) {
// on mouse out of button, close the related popover
// in 200 milliseconds if you're not hovering over the popover
var $popover = $(this);
setTimeout(function () {
if (!overPopup) {
$popover.popover('hide');
}
}, 200);
});
});
function details_in_popup(div_id, product_id){
$.ajax({
url: 'index.php?route=product/product/get_product_ajax',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json){
if (json['success']) {
$('#' + div_id).html(json['success']);
}
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
Here is how my html structure looks like:
<div class="image">
<a data-unique="unique-3" data-product-id="39" rel="popover" href="link to product">
<img src="path to image" />
</a>
</div>
UPDATE:
Thanks everyone for your help and input. Here is how I fixed it:
function details_in_popup(div_id, product_id){
//I added this block
if ( $("#popover_content_for_prod_" + product_id).length ) {
return $("#popover_content_for_prod_" + product_id).html();
}
$.ajax({
url: 'index.php?route=product/product/get_product_ajax',
type: 'post',
data: 'product_id=' + product_id,
dataType: 'json',
success: function(json){
if (json['success']) {
$('#' + div_id).html(json['success']);
//Also added this line
$('body').append('<div style="display:none;" id="popover_content_for_prod_' + product_id + '">' + json['success'] + '</div>');
}
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
解决方案
Use a hidden element to store the value of the boolean and get it before the AJAX call then set it when done.
HTML:
<div id="hiddenElement" value="true" style="display:none; visibility:hidden;"></div>
JS:
var once = $("hiddenElement").val();
if (once) {
$.ajax({
type: "POST",
url: "ajax.php?action=add_driver",
dataType: "json",
date: $("form#addDriver").serializeArray(),
beforeSend: function() {
$('.error, .success, .notice').remove();
}
}).done(function() {
$("#hiddenElement").val("false");
});
}
这篇关于jQuery的：制作一个Ajax调用请求一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
