如何在 fancybox iframe 中显示 ajax 响应

Posted 2023-05-09

【中文标题】如何在 fancybox iframe 中显示 ajax 响应

【英文标题】：How to show ajax response in fancybox iframe

【发布时间】：2014-12-26 21:28:31

【问题描述】：

我有 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
                           );
                        
                    );  
                  );  
                );

【问题讨论】：

如果你这样做 $.fancybox(response) 你试图显示一个（n）（json）[object]，它不会工作。您是否只想显示viewcart.jsp 页面而不管您从ajax 获得的response 吗？还是response 中的任何部分会影响您想在fancybox 中显示的内容？

我想将产品添加到 viewcart 并显示它。

好的，你告诉我你想要什么，你现在能具体回答我的问题吗？

响应影响？我不明白。如果我做对了，别无其他。你想要控制器部分还是代码的任何其他部分。

好吧，你的问题的标题令人困惑。您在问：“如何在 fancybox 中显示 ajax 响应”，所以我将重新提出我的问题：您想显示 ajax 响应的哪一部分？

【参考方案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

【讨论】：

感谢您的大力帮助。只是好奇，为什么我上面有问题的编辑代码只在我刷新后才起作用。

@user3844782 ：可能是因为您正在填充内联 <div>，它在页面加载时为空。我认为如果你像我的例子那样做，它应该开箱即用

你可能是对的。按照您的方式，我需要对代码的其他部分进行大量更改。但是，如果我能够使 EDIT 部分代码工作，那对我来说会更容易，（如果我让它加载它而不刷新它完成）。但我不知道这是否是正确的做法。我可以打开一个更详细的问题吗？