Как изменить содержимое div без перезагрузки веб-страницы?

Question

У меня есть веб-сайт, который использует PHP для выбора контента,

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

URL-адрес имеет формат domain.com/index.php?type.Мне нужно изменить блок #content без перезагрузки всей страницы, как я могу это сделать?

Answer 1

Поскольку вы пометили вопрос с помощью "jquery", я предполагаю, что вы знаете, что это такое, и что вы загружаете его на свою страницу.

Все, что вам нужно, это дать свой div и ID... content here

А затем используйте немного jquery .. в самом простом виде, чтобы загрузить контент из myurl.php в mydiv после завершения загрузки страницы:

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

Вы, несомненно, захотите, чтобы какая-то логика определяла, какие нагрузки и при каких обстоятельствах.Если вам нужно передать данные обратно на URL, вам нужно перейти на jquery ajax ($ .ajax).Все довольно просто, множество примеров в Интернете и хорошие документы на веб-сайте JQuery.

Answer 2

Лучше всего это сделать с помощью Ajax. Мне нравится использовать функцию jQuery ajax. Примерно так:

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;
}

Вам не нужно отправлять страницу в URL таким образом. Каждый раз, когда вы меняете URL, вы должны загружать другую страницу. За пределами .htaccess переписать. Что не то, что вам нужно.

Запустите это по клику или как хотите.

Answer 3

Если вы используете jQuery, это довольно просто. Вы не опубликовали то, что должно вызвать изменение, поэтому я предполагаю, что у вас есть список ссылок в другом элементе с идентификатором nav.

Подробнее о запросе jQuery Ajax можно прочитать здесь: http://api.jquery.com/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); 
            } 
        });
    });
});

Я бы также предложил выполнить некоторую очистку кода, такую ​​как кэширование вашего элемента $ ("# content") в событии load (что-то вроде window.container = $ ("# container"), и позже использовать window.container) , но я оставил все как есть, чтобы все было ясно.