Question

这是我想要做的事情

1 - 点击提交

2 - 隐藏DIV容器1

3 - 显示DIV容器2

4 - 加载＆＃34; PricingDisclaimer.php＆＃34;中的所有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

<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代码。只是尝试访问浏览器中的网址，您现在就会收到此错误：

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

点击[提交] - ＆gt;隐藏DIV容器1 - ＆gt;显示DIV容器2 - ＆gt;在DIV容器2中的.PHP文件中找到加载DIV

2 个答案: