Как изменить содержимое 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

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

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 2

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

Все, что вам нужно, это дать вашему Див и Ид ... здесь содержание

И затем использовать немного JQuery .. в своей простейшей форме просто загружать содержимое из «myurl.php» в «mydiv 'когда окончание загрузки страницы:

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

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

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

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