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

Question

I have a page with a div tag like this

<div class="ajax-load">

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

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

</div>

And a button like this

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

When I click the button with class go-to-page2 I need to load some php pages say four.php and five.php into or inside the div with class ajax-load.

Using plain markup, I can easily place it like this

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

But I do not want this. I want to load contents into the div using ajax. I tried this:

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

But cant load or append 5.php using this. How to overcome this? I am ready to use $.get and $.post

Answer 1

.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.