如何显示的fancybox iframe的Ajax响应(How to show ajax respo

我有2 JSP的products.jsp和。现在我想用的fancybox显示在IFRAME车（viewcart.jsp）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
                           });
                      }  
                    });  
                  });  
                });

Answer 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

它假设你知道你的正确（JSON）结构response 。

见的jsfiddle

文章来源: How to show ajax response in fancybox iframe