Question

我一直在四处搜寻，没有什么比我需要的更合适。这就是我想要完成的事情：

<a href="">TSConfig</a> <!-- When clicked, it loads tsconfig.php which contains a form and some php code into #main_content -->
<a href="">MVSN</a> <!-- When clicked, it loads mvsn.php which contains a form and some php code into #main_content -->
<a href="">Fulfillment</a> <!-- When clicked, it loads maint_fulfil.php which contains a form and some php code into #main_content -->

<div class="grid_3" id="main_content">

    <!-- PHP CONTENT TO LOAD HERE -->

</div>

我已经尝试了不同的JQuery示例变体来尝试使其工作，但是大多数示例都包含从.php文件中提取id并以某种方式操纵url，这是我不想做的事情。

非常感谢，我希望我解释得对。

Answer 1

将您的HTML更改为此...

<a class="ajax-link" href="tsconfig.php">TSConfig</a> <!-- When clicked, it loads tsconfig.php which contains a form and some php code into #main_content -->
<a class="ajax-link" href="mvsn.php">MVSN</a> <!-- When clicked, it loads mvsn.php which contains a form and some php code into #main_content -->
<a class="ajax-link" href="maint_fulfil.php">Fulfillment</a> <!-- When clicked, it loads maint_fulfil.php which contains a form and some php code into #main_content -->

<div class="grid_3" id="main_content">

    <!-- PHP CONTENT TO LOAD HERE -->

</div>

这是为您加载所需页面的脚本......

$(function() {
    $("a.ajax-link").on("click", function(e) {
        e.preventDefault();
        $("#main_content").load(this.href);
    });
});

我在每个链接中添加了课程ajax-link，因此您可以将上述脚本应用于它们，但不能在页面上应用任何其他链接。

Answer 2

jQuery.load

最后一个例子也很清楚：

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});

使用JQuery将.php文件加载到div中

2 个答案: