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我需要在four.php and five.php

中加载一些php页面div with class ajax-load.

使用普通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

您可以$.get并附加到html

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

如果您希望首先加载4.php，请以嵌套方式执行这两项操作：

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

Answer 2

.load()用您加载的任何内容替换目标元素的内容。您需要加载page4，然后加载APPEND第5页，例如

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

同样请注意，由于这将涉及两个单独的http请求，因此无法保证两个请求中的哪一个将首先返回。如果在5.php之前加载4.php是绝对关键的，那么你必须将请求链接起来，以便5.php的请求仅在4.php完成后才会消失。

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的回答）。

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

3 个答案: