Динамическая загрузка контента с помощью Ajax

Question

Я понимаю, что это было закрыто раньше, но я не в своей зоне комфорта, и я наклоняю, похоже, накладываю куски на то, чтобы соответствовать моей ситуации.

Я создаю интерфейс браузера, и мне нужно динамически загружать через ajax различные .php-файлы в div, когда в боковое меню кликаются разные ссылки.

Интерфейс, например, находится на www.mydomain.com/interface.php.

Файлы php находятся, например, в www.mydomain.com/interfacepages/.

Вот пример кода:

<!-- Navigation --> 
<div class="menu"> 
<ul> 
    <li><a href="#">Page1</a></li> 
    <li><a href="#">Only a submenu container, not a real page/link.</a> 
     <ul> 
      <li><a href="#">Page2</a></li> 
      <li><a href="#">Page3</a></li> 
      <li><a href="#">Page4</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Only a submenu container, not a real page/link.</a> 
     <ul class="submenu"> 
      <li><a href="#">Page5</a></li> 
      <li><a href="#">Page6</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Page7</a></li> 
</ul> 
</div> 
<!-- Content --> 
<div class="content"></div> 

Я хотел JQuery/Ajax тянуть название ссылки (или атрибут отн, как я видел, сделано в некоторых случаях) найти соответствующий .php файл folderpages и загрузите его в содержимое div.

Например, ссылка указывает на страницы интерфейса/page1.php, jquery сделает ссылку неработоспособной с точки зрения php, а вместо этого включит этот php-файл в div.

Мне понадобится загрузить файл .php по умолчанию на загрузку страницы.

Im совершенно неуверенный, что положить как href.

Извините, если я выразил себя неправильно, но я не хватает некоторых основы я должен вероятно догнать, но я обычно предпочитаю учиться методом проб и неудач (но через 4 часа я решил приехать сюда :))

Answer 1

В ваш JS файл, по щелчку событие < а> тег, поместить этот АЯКС код:

$.ajax({ 
      url: [link to your php file] 
      type: [GET or POST] 
      data: [if needed] 
      success: function(html) { 
       alert(html); // display the response of your php function 
      } 
     }); 
    } 

Answer 2

Если вы хотите использовать простой HTML, вы можете просто изменить «целевой» атрибут всех ссылок, чтобы указать кадр, но вам нужно будет изменить свой контент div вместо рамки. Проверьте цель HTML и атрибуты кадров для получения дополнительной информации:

• http://www.w3schools.com/tags/att_a_target.asp
• http://www.w3schools.com/tags/tag_frame.asp

В качестве альтернативы, если вы предпочитаете JQuery. вы можете сначала подключить слушателя ко всем ссылкам, которые затем изменят содержимое содержимого div.

Вы можете использовать функцию JQuery load(), чтобы загрузить содержимое в DIV

Вот соответствующий отрывок:

$(".menu a").click(function() { 
    var link = $(this).attr('href'); 

    $(".content").load(link); 
}); 

Answer 3

Вы хотите передать свою полную ссылку страницы, загружаемую в HREF атрибута тега. Используйте это.

<script> 
jQuery(".menu li a").click(function() { 
var mylink = $(this).attr('href'); 

    jQuery(".content").load(mylink, 
     function(response, status, xhr) { 
     //alert(response);   
    }); 
}); 

window.onload = function() { 

    jQuery(".content").load('www.mydomain.com/interfacepages/default.php', 
    function(response, status, xhr) { 
     //alert(response);   

    }); 

} 
</script> 

Answer 4

Добавьте это к голове

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 

<script type="text/javascript">   
var loadedobjects="" 
var rootdomain="http://"+window.location.hostname 

function ajaxpage(url, containerid){ 
var page_request = false 
if (window.XMLHttpRequest) // if Mozilla, Safari etc 
    page_request = new XMLHttpRequest() 
else if (window.ActiveXObject){ // if IE 
    try { 
    page_request = new ActiveXObject("Msxml2.XMLHTTP") 
    } 
    catch (e){ 
    try{ 
     page_request = new ActiveXObject("Microsoft.XMLHTTP") 
    } 
    catch (e){} 
    } 
    } 
    else 
    return false 
    page_request.onreadystatechange=function(){ 
    loadpage(page_request, containerid) 
    } 
    page_request.open('GET', url, true) 
    page_request.send(null) 
} 

function loadpage(page_request, containerid){ 
    if (page_request.readyState == 4 && 
    (page_request.status==200 ||  window.location.href.indexOf("http")==-1)) 
    document.getElementById(containerid).innerHTML=page_request.responseText 
} 

function loadobjs(){ 
    if (!document.getElementById) 
    return 
    for (i=0; i<arguments.length; i++){ 
    var file=arguments[i] 
    var fileref="" 
    if (loadedobjects.indexOf(file)==-1) 
    { //Check to see if this object has not already been  added to page before proceeding 
     if (file.indexOf(".js")!=-1){ //If object is a js file 
     fileref=document.createElement('script') 
     fileref.setAttribute("type","text/javascript"); 
     fileref.setAttribute("src", file); 
     } 
     else if (file.indexOf(".css")!=-1){ //If object is a css file 
     fileref=document.createElement("link") 
     fileref.setAttribute("rel", "stylesheet"); 
     fileref.setAttribute("type", "text/css"); 
     fileref.setAttribute("href", file); 
     } 
    } 
    if (fileref!=""){ 
     document.getElementsByTagName("head").item(0).appendChild(fileref) 
     loadedobjects+=file+" " //Remember this object as being already added to page 
    } 
    } 
} 
</script> 

меню Создать

<ul class="simple-list"> 
    <li><a href="javascript:ajaxpage('phpcontents/1.php', 'rightcolumn');">home</a></li>   
    <li><a href="javascript:ajaxpage('phpcontents/5.php', 'rightcolumn');">about us</a></li> 
    <li><a href="javascript:ajaxpage('phpcontents/6.php', 'rightcolumn');">blog </a></li> 
    <li><a href="javascript:ajaxpage('phpcontents/7.php', 'rightcolumn');">contact</a></li> 
</ul> 

Область контента rightcolumn; он может быть создан в любом месте страницы, содержащей меню.

<div id=rightcolumn"> 
    <!-- your container for displaying content --> 
</div> 

Смотрите, что HREF в каждом <li>. Javascript код имеет два поля:

1. Одно это имя файла содержат данные, относящиеся к phpcontents папки
2. второго поле имя контейнера, здесь rightcolumn является контейнером.

Всего наилучшего, попробуйте ... он работает на 100%.