Я понимаю, что это было рассмотрено раньше, но я не в своей зоне комфорта, и я наклоняю, кажется, ставят куски, чтобы соответствовать моей ситуации.
Я создаю интерфейс для браузера, и мне нужно динамически загружать через 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 вытащил имя ссылки (или атрибут rel, как я видел в некоторых случаях), найдите соответствующий .php-файл в папке interfacepages и загрузите его в div содержимого.
Например, ссылка указывает на interfacepages / page1.php, jquery сделает ссылку нерабочей с точки зрения php, а вместо этого просто включит этот php-файл в div.
Мне понадобится загрузить файл .php по умолчанию на загрузку страницы.
Im совершенно неуверенный что положить как href.
Извините, если я выразил себя не так, но я упустил некоторые основы, которые я, вероятно, должен догнать, но я обычно предпочитаю обучение по пробным и неудачным (но через 4 часа я решил приехать сюда :))
В вашем js-файле при событии click тега <a> поместите этот код ajax:
$.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 } }); }
Добавьте это в голову
<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 имеет два поля:
rightcolumn – это контейнер. Все самое лучшее, попробуй … он работает на 100%.
Если вы хотите использовать простой HTML, вы можете просто изменить атрибут «target» всех ваших ссылок, чтобы указать на фрейм, но вам нужно будет изменить свой контент div вместо рамки. Проверьте атрибуты цели и фрейма HTML для получения дополнительной информации:
Альтернативно, если вы предпочитаете jQuery. вы можете сначала подключить слушателя ко всем ссылкам, которые затем изменят содержимое содержимого div.
Вы можете использовать функцию jQuery load () для загрузки вашего контента в div
Вот соответствующий фрагмент:
$(".menu a").click(function() { var link = $(this).attr('href'); $(".content").load(link); });
Вы хотите передать полную ссылку на страницу, которую вы загружаете в атрибут 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>