Javascript 后期预览-使用AJAX和Fancybox传递数据

我正在尝试做一个后期预览，它将出现在一个新的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部件吗？

正如我在评论中提到的，您的预览按钮应该通过AJAX提交表单以获取后期预览值（我们将使用

AJAX

而不是

iframe

），因此：

---

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

正如我在评论中提到的，您的预览按钮应通过ajax提交表单以获取后期预览值（我们将使用

ajax

而不是

iframe

），因此：

---

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

我尝试了一种更有趣的方法，使用fancybox

在fancybox页面中

var myvar;
$(document).ready(function(){
    myvar = parent.$("#formvariwant").val();
});

---

我用fancybox尝试了一种更有趣的方法

在fancybox页面中

var myvar;
$(document).ready(function(){
    myvar = parent.$("#formvariwant").val();
});

---

我不喜欢这个解决方案，所以我会发布我自己的调查结果

为什么要用1编写代码

.on（“单击”…

2.

e.preventDefault

3.

$.ajax

4.

this.href

只要在成功时调用fancybox，这已经发生了吗

如果您决定使用ajax而不是iframe（如在接受的答案中），您可以简单地将

type

属性添加到

fancybox（）

调用中，因为它正在被检查，并通过所有其他调用

$('.preview2').fancybox({
    type: "ajax",
    ajax: {
        data:  $('#postp').serialize() 
     // url: "someurl.php" not needed here, it's taken from href
     //                    if you need it, e.g. you have a button, not a link
     //                    use "href" property that overrides everything
     //                    not attribute, cause it's invalid
    }
 // href: "url_to_add_or_override_existing_one",
 // all other effects
 // afterLoad: function () { // other cool stuff }
});

编辑如前所述，这还不够，每次单击链接时都必须获取表单数据，因此需要

beforeLoad（）

而不是

数据

。最后：

$('.preview2').fancybox({
    type: "ajax",
    beforeLoad: function() {
        this.ajax.data = $('#postp').serialize();
    }
});

您也可以删除所有

数据-*

属性

---

KISS

我不喜欢这个解决方案，所以我会发布我自己的调查结果

为什么要用1.

.on（“单击“，…

2.

e.preventDefault

3.

$.ajax

4.

this.href

就为了在成功时调用fancybox而编写代码，这已经发生了吗

如果您决定使用ajax而不是iframe（如在接受的答案中），您可以简单地将

type

属性添加到

fancybox（）

调用中，因为它正在被检查，并通过所有其他调用

$('.preview2').fancybox({
    type: "ajax",
    ajax: {
        data:  $('#postp').serialize() 
     // url: "someurl.php" not needed here, it's taken from href
     //                    if you need it, e.g. you have a button, not a link
     //                    use "href" property that overrides everything
     //                    not attribute, cause it's invalid
    }
 // href: "url_to_add_or_override_existing_one",
 // all other effects
 // afterLoad: function () { // other cool stuff }
});

编辑如前所述，这还不够，每次单击链接时都必须获取表单数据，因此需要

beforeLoad（）

而不是

数据

。最后：

$('.preview2').fancybox({
    type: "ajax",
    beforeLoad: function() {
        this.ajax.data = $('#postp').serialize();
    }
});

您也可以删除所有

数据-*

属性

---

KISS

是ajax或iframe…尝试不使用

数据fancybox类型

再见，JFK，又是我。删除数据fancybox类型会导致“无法加载请求的内容。请稍后重试”错误。

#post

中有什么？…有演示站点吗？#post是表单的ID。您认为演示站点对您有帮助吗？让其他人访问面板可能会有问题，但如果需要，我可以尝试这样做；）注意，为了“预览”表单，您必须提交它（通过ajax）…这就是您想要做的吗？如果是这样，恐怕您在任何情况下都需要使用手动方法。是ajax还是iframe…请不要使用

data fancybox type

早安，JFK，又是我。删除data fancybox type会导致“无法加载请求的内容。请稍后再试”错误。

#post

中有什么？…有演示站点吗？#post是表单的ID。您认为演示站点会帮助您吗？让其他人访问面板可能会有问题，但如果需要，我可以尝试这样做；）注意，为了“预览”表单，您必须提交它（通过ajax）。。。这就是你想做的吗？如果是这样的话，恐怕你在任何情况下都需要使用手动方法。非常感谢！你的演示效果很好，这正是我需要的。我正在尝试在我的CMS中运行你的脚本。在点击链接后的这一刻，什么都没有发生，所以我认为其他一些脚本令人不安。稍后我会给出反馈，我想会有用的。再次感谢！：）我的声誉太差，无法点击“向上”，所以我只能点击“确定”：）它可以工作！问题是preview.php文件中的部分代码。。。但我发现了另一个问题——我只能打开预览文件一次（当然不用刷新）——第二次、第三次，等等。Firebug中的时间出现错误：TypeError:$。fancybox不是函数closeClick:false@kacper很可能您的preview.php也加载了一些js脚本或jQuery，从而导致冲突afterwards@thumbtackthief：url指的是将预处理表单的文件（通常为php文件），在本例中，将输入字段的值返回fancybox。在这里查看该php文件的示例。。。。如果你不知道如何使用php，那就没什么帮助了。谢谢！你的演示效果很好，这正是我需要的。我正在尝试在我的CMS中运行你的脚本。在点击链接后的这一刻，什么都没有发生，所以我认为其他一些脚本令人不安。稍后我会给出反馈，我想会有用的。再次感谢！：）我的声誉太差，无法点击“向上”，所以我只能点击“确定”：）它可以工作！问题是preview.php文件中的部分代码。。。但我发现了另一个问题——我只能打开预览文件一次（当然不用刷新）——第二次、第三次，等等。Firebug中的时间出现错误：TypeError:$。fancybox不是函数closeClick:false@kacper很可能您的preview.php也加载了一些js脚本或jQuery，从而导致冲突afterwards@thumbtackthief：url引用一个文件（通常是php文件），该文件将预处理表单，在本例中，将返回值