Question

我一直在努力学习大部分内容，因为我和以前的问题一样，我提出过一些可能看起来过于简单化或公然过度的问题 - 我说通过同行解释/示例/建议我学得最好所以，提前谢谢。

到目前为止，我已经使用了我在这里学到的东西来构建我的个人网站的基本结构。这个概念是一个右对齐的手风琴菜单，它在页面之间保持不变，而左侧区域的内容和背景将根据菜单选择而改变 - 从根本上说就像用来观看的帧或iframe。

问题：我有一些js知识，我知道我可以通过getElementById循环一些内容，但因为这些将在一个库中，我不想通过在后台加载54+图像来降低我的速度。我也知道我可以在侧边栏链接中使用php制作缩略图并完全加载页面，但由于我不希望菜单改变，我一直在试图找出最佳方法来解决这个问题。到目前为止，我听说过提到PHP，JQuery和AJAX（我知道这个名字，但对我来说是新手）。下面是代码的示例以及我想要做的事情：

<body>
<div id="all">
  <div id="live-area">

    <?php include("blog.php") ?>

  </div>
  <div id="side-bar-area">
    <div id="sidebar-header">
      <h3>Title</h3>
      <h1>Title</h1>
    </div>
    <div id="nestedAccordion">
      <h2>Portfolio</h2>
      <div>
        <h3>Branding</h3>
        <div>
          <ul>
            <li class="thumbs">
              <a href="#"><img src="images/thumbs/example1.jpg"/></a>
              <a href="#"><img src="images/thumbs/example2.jpg"/></a>
              <a href="#"><img src="images/thumbs/example3.jpg"/></a>
              <a href="#"><img src="images/thumbs/example4.jpg"/></a>
              <a href="#"><img src="images/thumbs/example5.jpg"/></a>
              <a href="#"><img src="images/thumbs/example6.jpg"/></a>
              <a href="#"><img src="images/thumbs/example7.jpg"/></a>
              <a href="#"><img src="images/thumbs/example8.jpg"/></a>
              <a href="#"><img src="images/thumbs/example9.jpg"/></a>
        </li>
          </ul>
        </div>
        <h2>Blog</h2>
        <div>
          <ul style="margin:0px;">
            <li>entry 1</li>
            <li>entry 2</li>
          </ul>
        </div>
        <h2>About</h2>
        <div>
          <ul style="margin:0px;">
            <li>About</li>
            <li>Resume</li>
            <li>Accolades</li>
            <li>Contact</li>
          </ul>
      </div>
    </div>
  </div>
</body>

基于以上所述，我想要的是，只要选择菜单中的任何项目（例如<a href="#"><img src="images/thumbs/example1.jpg"/></a>），它就会更改<?php include("blog.php") ?>的内容而不重新加载页面。

首先，这是可行的吗？其次，是否有人就这方面的新手提出建议 - 无论是基本教程还是外行人的操作方法？

Answer 1

当您向代码添加jquery时，您可以使用AJAX执行服务器端请求并加载新内容并替换现有内容。

$.ajax({
    url: 'http://example.org/other-page.php',
    dataType: 'html'
})
.done(function(data) {
    // Assuming the request returns HTML, replace content
    $('#live-area').html(data);
});

Answer 2

试试这个，

在html，

<div id="live-area">
    <?php include("blog.php") ?>
</div>
<li class="thumbs">
    <a href="#" data-page="page1.php"><img src="images/thumbs/example1.jpg"/></a>
    <a href="#" data-page="page2.php"><img src="images/thumbs/example2.jpg"/></a>
    <a href="#" data-page="page3.php"><img src="images/thumbs/example3.jpg"/></a>
    <a href="#" data-page="page4.php"><img src="images/thumbs/example4.jpg"/></a>
</li>

在script，

<script>
$('.thumbs a').click(function(){
    var page    =   $( this ).attr('data-page');
    $.ajax({
        type:'POST',
        url:page,
        success: function(response){
            $('#live-area').html(response);
        }
    });
})
</script>

如何在不重新加载页面的情况下更改php包含？

2 个答案: