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拉出链接的名称（或者我在某些情况下看到的rel属性）在interfacepages文件夹中找到匹配的.php文件并将其加载到内容div中。

例如，链接指向interfacepages / page1.php，jquery将从php的角度使链接无法正常工作，而只是将该php文件包含在div中。

我需要它在页面加载时加载默认的.php文件。

我很不确定要把什么作为href。

很抱歉，如果我表达自己错了，但是我错过了一些基础知识我应该赶上但我通常更喜欢通过试验和失败来学习（但是4小时后我决定来这里:)）

Answer 1

将此添加到头部

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

在每个<li>中查看href。 javascript代码有两个字段：

一个是包含属于文件夹phpcontents
第二个字段是容器的名称，此处rightcolumn是容器。

一切顺利，试一试......这是100％的工作。

Answer 2

在你的js文件中，点击事件为＆lt; a＆gt;标签，把这个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
            }
        });
    }

Answer 3

如果您想使用简单的HTML，您只需将所有链接的“目标”属性更改为指向框架，但您需要将内容div更改为框架。检查HTML目标和框架属性以获取更多信息：

或者，如果您更喜欢jQuery。您可以先将侦听器附加到所有链接，然后更改内容div的内容。

您可以使用jQuery load（）函数在div中加载内容

以下是相关摘录：

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

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

Answer 4

您希望传递在标记的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>

使用Ajax动态加载内容

4 个答案: