php - 使用 jquery 和 ajax 包含或附加许多 php 页面

Question

我有一个带有这样div标签的页面

<div class="ajax-load">

<!-- First.php: jquery-slider-1
            jquery-widget-1

    second.php: jquery-slider-2
                jquery-widget-2
 -->

</div>

像button这样

<button class="go-to-page-2">

当我单击时，button with class go-to-page2我需要将一些 php 页面加载four.php and five.php到里面或里面div with class ajax-load.

使用 plain markup，我可以很容易地像这样放置它

<?php
    require_once("four.php");
    require_once("five.php");
?>

但我不想要这个。我想load contents into the div using ajax. 我试过这个：

 $(".ajax-load").load("4.php")

但不能使用这个加载或附加 5.php。如何克服这一点？我准备好使用了$.get and $.post

Answer 1

You can just $.get and append to the html

$.get('5.php', function(data) {
  $('.ajax-load').append(data);
});

If you want 4.php to load first, do the two of them in a nested way:

$.get('4.php', function(data) {... $.get('5.php', ...) })

Answer 2

.load() replaces the contents of the target element with whatever you loaded. You'd need to load page4, then APPEND page5, e.g.

$(".ajax-load").load("4.php");
$.get('5.php', function(data) {
   $('.ajax-load').innerHTML += data;
});

As well, note that since this will involve TWO separate http requests, there is NO guarantee as to which of the two requests will come back first. If loading 4.php before 5.php is absolutely critical, you'll have to chain the requests to so that the request for 5.php goes out only after 4.php has completed.

Answer 3

改用 $.get。

$.get('4.php', function(data) {
$('.ajax-load').prepend(data); //ensure this is appended before 5.php
});
$.get('5.php', function(data) {
$('.ajax-load').append(data); //ensure this is appended after 4.php
});

不过，它并不完美。它将作为两个单独的异步 ajax 请求执行。您可以为此使用 $.Deferred ，或使用 ajax 回调（请参阅 w00d 的答案）。