使用JQuery將.php文件加載到div中

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添加了類ajax-link ，因此您可以將上述腳本應用於它們，但不能在頁面上應用任何其他鏈接。

Answer 2

jQuery.load

最后一個例子也很清楚：

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