php - How to change the content of a div without reloading the webpage? - Stack Overflow

admin管理员组

文章数量:1395248

I have a website, that uses PHP to select the content,

<div>  
    <? include ("navigation.php"); // navigation.php generates the menu ?>
</div>
<div>
    <?      
        $type = $_GET["type"];
        switch ($type) {
        case "page" :
            include "Text.php";
            break;  
        case "news":
            include "news_2.php";
            break;
        default :
            include "main.php";     
        }
    ?>
</div>

The url is of the format domain/index.php?type. I need to change the block #content without reloading the whole page, how can I do this?

I have a website, that uses PHP to select the content,

<div>  
    <? include ("navigation.php"); // navigation.php generates the menu ?>
</div>
<div>
    <?      
        $type = $_GET["type"];
        switch ($type) {
        case "page" :
            include "Text.php";
            break;  
        case "news":
            include "news_2.php";
            break;
        default :
            include "main.php";     
        }
    ?>
</div>

The url is of the format domain./index.php?type. I need to change the block #content without reloading the whole page, how can I do this?

• php
• javascript
• jquery
• ajax

Share Improve this question Follow edited Apr 29, 2011 at 8:18 Georg Schölly 126k5454 gold badges224224 silver badges276276 bronze badges asked Mar 15, 2011 at 18:46 shadyshady 111 gold badge11 silver badge11 bronze badge

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As you've tagged the question with "jquery" I assume you know what that is, and that you're loading it into your page.

All you need to is give your div and ID... content here

And then use a bit of jquery.. in its simplest form just to load your content from 'myurl.php' into 'mydiv' when the page has finished loading:

$(document).ready(function() { 
  $("#mydiv").load("myurl.php");
});

You'll no doubt want some logic to determine what loads, and under what circumstances. If you need to pass data back to the URL then you'll need to go for jquery ajax ($.ajax). Its all pretty easy, loads of examples on the web, and good docs on the JQuery website.

This would best be done with Ajax. I like using jQuery's ajax function. Something like this:

function load(page){    
    var datastring='ANY DATA YOU WANT TO SEND';

    $.ajax({
        type: "POST",
        url: 'your/pagehtml/',
        data: "bust="+Date()+datastring,
        dataType: "html",
        cache: false,
        success: function(html){ 
            $('#content').html(html)
        }
    });
    return false;
}

You wouldn't need to send the page in the URL this way. Anytime you change the url, you must be loading a different page. Outside of .htaccess rewrite. Which isn't what you need.

Fire this on click or whatever you want.

If you're using jQuery, it's pretty easy. You didn't post what is supposed to trigger the change, so I'll assume you have a list of links in another element with an id of nav.

Read more about the jQuery Ajax request here: http://api.jquery./jQuery.ajax/

//run on page load
$(function(){   
    //bind a click event to the nav links
    $("#nav a").bind("click", function(e){ 

        //keep the links from going to another page by preventing their default behavior
        e.preventDefault();

        //this = link; grab the url
        var pageLocation = this.href;

        //fire off an ajax request
        $.ajax({ 
            url: pageLocation, 

            //on success, set the html to the responsetext
            success: function(data){ 
                $("#content").html(data.responseText); 
            } 
        });
    });
});

I'd also suggest doing some code cleanup like caching your $("#content") element on the load event (something like window.container = $("#container"), and using window.container later on), but I left it as-is so that everything remains clear.

本文标签： phpHow to change the content of a div without reloading the webpageStack Overflow