我有2个jsp的products.jsp和viewcart.jsp。现在我试图使用fancybox在iframe中显示购物车(viewcart.jsp)。当我点击添加到购物车,iframe不会弹出。这就是我所做的。我应该如何将ajax响应传递给iframe?
$(document).ready(function(){
$('.cart').click(function() {
var pdtid = $(this).attr('data-productid');
$.ajax({
url : '${pageContext.request.contextPath}/addtocart' + pdtid,
dataType: 'json',
type : 'GET',
data :{'id': pdtid},
success: function(response) {
$.fancybox(response,{
'width' : 900,
'height' : 520,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'href' : "${pageContext.request.contextPath}/viewcart.html"
});
}
});
});
});
修改
$(document).ready(function() {
$('.cart').on("click", function (e) {
e.preventDefault();
var pdtid = $(this).attr('data-productid');
$.ajax({
type: "GET",
cache: false,
url: '${pageContext.request.contextPath}/addtocart' + pdtid,
data: {'id': pdtid},
success: function (response) {
$.fancybox(response,{
href : '#response',
width: 500,
height: 500
});
}
});
});
});
答案 0 :(得分:1)
如果我正确理解了您的问题,您可以尝试格式化 ajax response
,然后通过fancybox解析它:
jQuery(document).ready(function ($) {
$.ajax({
url: "{your processing file's URL}",
cache: false,
dataType: "json",
success: function (response) {
var result =
"<div id='result'>" +
"<p>Product Id : " + response.id + "</p>" +
"<p>Product Name : " + response.name + "</p>" +
"</div>";
$.fancybox(result, {
type: "html"
}); // show formated response
}
})
}); // ready
它假设您知道response
的正确( json )结构。
参见 JSFIDDLE