Javascript 发布预览 - 使用 AJAX 和 Fancybox 传递数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14316054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Post preview - Passing data with AJAX and Fancybox
提问by kacper
I'm trying to do a post preview, which will appears in a new Fancybox iframe. Since couple of weeks I'm looking for some help or best practices, but I can't find it.
我正在尝试进行发布预览，它将出现在新的 Fancybox iframe 中。几周以来，我一直在寻找一些帮助或最佳实践，但找不到。
My main problem is to pass the data from form (before updating database) to Fancybox window. My AJAX skills are very poor, so maybe my problem isn't so hard.
我的主要问题是将数据从表单（在更新数据库之前）传递到 Fancybox 窗口。我的 AJAX 技能很差，所以也许我的问题不是那么难。
Please check the code:
请检查代码：
$('.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()
}
});
And a calling link:
和一个调用链接：
<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a>
I'm almost sure everything is fine with preview.php file, just posting the variables and printing it in right places.
我几乎可以肯定 preview.php 文件一切正常，只需发布变量并将其打印在正确的位置即可。
Can someone check Fancybox / AJAX part?
有人可以检查 Fancybox / AJAX 部分吗？
回答by JFK
As I mentioned in my comments, your preview button should submit the form via ajax to get the POST preview values (we'll use ajaxinstead of iframe) so :
正如我在评论中提到的，您的预览按钮应该通过 ajax 提交表单以获取 POST 预览值（我们将使用ajax代替iframe），因此：
<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>
Then you would need to bind the preview button to a manual on("click")method to submit the form via ajaxfirstly ....and then post the results in fancybox secondly like :
然后您需要将预览按钮绑定到手动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
See DEMO(feel free to explore the source code)
见DEMO（随意探索源代码）
回答by vladkras
I don't like the solution, so I will post my own investigation.
我不喜欢这个解决方案，所以我会发布我自己的调查。
Why writing code with 1. .on("click", ...2. e.preventDefault3. $.ajax4. this.hrefjust to call fancybox on success, that already has all this functions inside?
为什么用 1. .on("click", ...2. e.preventDefault3. $.ajax4.编写代码this.href只是为了成功调用fancybox，里面已经包含了所有这些功能？
If you decide to use ajax instead of iframe (like in accepted answer) you could simply add typeproperty to fancybox()call, cause it's beening checked, and pass all other
如果您决定使用 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 }
});
EDITAs @JFKpointed it's not enough, you have to get form data each time you click the link, so beforeLoad()needed instead of data. Finnaly:
编辑正如@JFK指出的那样，这还不够，每次单击链接时都必须获取表单数据，因此beforeLoad()需要而不是data. 最后：
$('.preview2').fancybox({
type: "ajax",
beforeLoad: function() {
this.ajax.data = $('#postp').serialize();
}
});
You can remove all data-*atrributes too
您也可以删除所有data-*属性
KISS
吻
回答by Theresa Forster
I have tried a more interesting way with fancybox that works,
我已经尝试了一种更有趣的方法，用fancybox 工作，
in the fancybox page
在fancybox页面中
var myvar;
$(document).ready(function(){
myvar = parent.$("#formvariwant").val();
});
