如何在fancybox iframe中显示ajax响应
我有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 }); } }); }); });
如果我理解你的问题，你可以尝试格式化你的ajax response然后通过fancybox解析它：
jQuery(document).ready(function ($) { $.ajax({ url: "{your processing file's URL}", cache: false, dataType: "json", success: function (response) { var result = "" + "Product Id : " + response.id + "
" + "Product Name : " + response.name + "
" + ""; $.fancybox(result, { type: "html" }); // show formated response } }) }); // ready
假设您知道response的正确（ json ）结构。
请参阅JSFIDDLE