发布预览-使用AJAX和Fancybox传递数据

小编典典

发布预览-使用AJAX和Fancybox传递数据

ajax

我正在尝试做一个帖子预览，它将出现在新的Fancybox iframe中。几周以来，我一直在寻找一些帮助或最佳做法，但我找不到。

我的主要问题是将数据从表单（在更新数据库之前）传递到Fancybox窗口。我的AJAX技能很差，所以也许我的问题并不难。

请检查代码：

$('.preview2').fancybox({
fitToView    : false,
width        : 905,
height        : 505,
autoSize    : false,
closeClick    : false,
openEffect    : 'none',
closeEffect    : 'none',
ajax: {
    type: "POST",
    cache : false,
    url: "preview.php",
    data: $('#postp').serialize()
}
});

还有一个调用链接：

<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a>

我几乎可以肯定的是，preview.php文件一切正常，只需发布变量并将其打印在正确的位置即可。

有人可以检查Fancybox / AJAX零件吗？

阅读 298

2020-07-26

共1个答案

小编典典

正如我在评论中提到的那样，您的预览按钮应通过ajax提交表单以获取POST预览值（我们将使用ajax代替iframe），因此：

<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>

然后，您需要将预览按钮绑定到手动on("click")方法，以ajax首先通过… 提交表单，然后将结果发布到fancybox中，如下所示：

$(document).ready(function () {
  $('.preview2').on("click", function (e) {
    e.preventDefault(); // avoids calling preview.php
    $.ajax({
      type: "POST",
      cache: false,
      url: this.href, // preview.php
      data: $("#postp").serializeArray(), // all form fields
      success: function (data) {
        // on success, post (preview) returned data in fancybox
        $.fancybox(data, {
          // fancybox API options
          fitToView: false,
          width: 905,
          height: 505,
          autoSize: false,
          closeClick: false,
          openEffect: 'none',
          closeEffect: 'none'
        }); // fancybox
      } // success
    }); // ajax
  }); // on
}); // ready

参见
DEMO
（随意浏览源代码）

2020-07-26