点击 [提交] -> 隐藏 DIV 容器 1 -> 显示 DIV 容器 2 -> 加载 DIV 容器 2 内的 .PHP 文件中的 DIV

Question

这就是我想要做的事情

1 - 点击提交

2 - 隐藏 DIV 容器 1

3 - 显示 DIV 容器 2

4 - 将“PricingDisclaimer.php”中的所有 DIV 加载到 Div Container 2 中

---

这是我的 DIV 代码

<div id="MainContainer">

<div class="Container1">
Lalala content
<input type="submit" value="Select" id="Load_Container2"/>
</div>

<div id="Container2" style="display:none;">I want to load all of the DIVs found inside "PricingDisclaimer.php" and place them inside this container</div>
</div>

这是我的 Javascript / Jquery 代码

<script type="text/javascript">
$(document).ready( function() {
$("#Load_Container2").on("click", function() {
    $(".Container1").hide();
    $("#Container2").show();
    $("#Container2").load( "http://www.prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php" );

});
</script>

它隐藏了 DIV Container1 [WORKS]

显示 DIV Container2 [WORKS]

问题：

它不会将 PricingDisclaimer.php 加载到 #Container2 中

这是 PricingDisclaimer.php

<div id="PricingBoxDisclaimer">
<div id="PBDisclaimerTLCorner"></div><div id="PBDisclaimerTMBorder"></div><div id="PBDisclaimerTRCorner"></div>
<div id="PBDisclaimerMLBorder"></div><div id="PBDisclaimerContainr"><div id="PricingDisclaimerTitle"><span><b>DISCLAIMER</b></span></div><div id="PricingDisclaimerContainer"><div id="PricingDisclaimerText">
<?php query_posts('p=1272' ); ?>
<?php if (have_posts()); ?>
<?php while ( have_posts() ) : the_post();?>
<br /><h1>
<?php
the_title();
echo '<br>'; ?></h1><br />
<?php
echo '<p>';
the_content();
echo '</p>';
endwhile; ?>
</div></div><div id="PBDisclaimerMRBorder"></div>
<div id="PBDisclaimerBLCorner"></div><div id="PBDisclaimerBMBorder"></div><div id="PBDisclaimerBRCorner"></div>
</div>

^ 我想要所有这些 ^

在里面

v v v v v v

<div id="Container2" style="display:none;">HERE</div>

我该怎么做？

Answer 1

我想这可能对你有帮助。

$("#Container2").html('<iframe src="http://www.prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php"</iframe>');

Answer 2

这实际上是因为，您调用 load 的方式，文件被称为独立文件，但它有一些代码依赖于一些 wordpress 函数。因此，当您尝试调用它时，它不能被调用。如果你想以这种方式加载它，你应该让它独立于 wp 代码。只需尝试在浏览器中访问 url，您现在就会收到此错误：

DISCLAIMER

Fatal error: Call to undefined function query_posts() in /srv/disk12/1806831/www/prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php on line 4

编辑

我明白了，在您删除 WP 相关代码后，您的链接现在可以正常工作了。但是我在您的 JS 代码中发现了另一个问题。您错过了 }); 的右大括号 $(document).ready。像这样修复它：

$(document).ready( function() {
    $("#Load_Container2").on("click", function() {
        $(".Container1").hide();
        $("#Container2").show();
        $("#Container2").load( "http://www.prismasites.com/wp-content/themes/Prismasites/PricingDisclaimer.php" );
    }); 
}); //You missed this closing braces

跨域问题

跨域请求被阻止：同源策略不允许读取远程资源。

这是因为，您将请求从一个域发送到另一个域，这不允许跨域请求。你可以从你的文件PricingDisclaimer.php 中允许它。只需在文件顶部添加这一行（在执行任何回显或输出任何 html 代码之前）：

header('Access-Control-Allow-Origin: *');

了解更多信息：Cross-origin resource sharing