2

我意识到这已经被覆盖过，但我超出了我的舒适区，我似乎无法将这些碎片放在一起以适应我的情况。

我正在构建一个浏览器游戏界面，当在侧面菜单上单击不同的链接时，我需要通过 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 的角度使链接不起作用，而只是在 div 中包含该 php 文件。

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

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

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

4

4 回答 4

2

将此添加到头部

<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>. javascript代码有两个字段：

  1. 一是文件名包含属于文件夹 phpcontents 的数据
  2. 第二个字段是容器的名称，这里rightcolumn是容器。

一切顺利，试一试……它 100% 有效。

于 2014-02-25T20:07:37.930 回答
1

在您的 js 文件中，在 < 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
            }
        });
    }
于 2013-06-06T07:55:09.520 回答
0

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

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

您可以使用jQuery load () 函数将您的内容加载到div中

这是一个相关的片段：

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

  $(".content").load(link);
});
于 2013-06-06T07:56:23.737 回答
0

您想传递您在标签的 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>
于 2013-06-06T08:02:16.517 回答