javascript - 如何使用 ajax 定位特定 ID？

Question

我是第一次尝试 ajax(在某种程度上还有很多 js)，所以我不确定自己做错了什么。

目标是边栏中的一系列缩略图在被选中时将更改位于中心的 div 的内容。该链接目前看起来像这样:

<img src="images/thumbs/elon-scissors-logo.jpg" onclick="reloadMiddleWith('about','about','test')"/>

单击时，它会运行以下函数并更改背景并调用 php 源代码。

function reloadMiddleWith(theme, page, content) {
  var new_url = "http://www.chrisjohndesigns.com/" + page + ".php/#" + content;
  $('#live-area').addClass(theme);
  $.ajax({
      url: new_url,
      dataType: 'html'
 })
  .done(function(data) {
      // Assuming the request returns HTML, replace content
      $('#area-loader').html(data);
 });

}

我对此进行了测试，当它只是背景和新的 php 页面时它工作正常，但我认为没有制作 50 个页面来调用(并且由于缺乏正确的理解，目前甚至没有尝试数组或数据库)我只会制作 1 或 2 个重复相同容器样式的新页面，然后只调用我想通过 id 标签显示的页面。目前当我尝试它时，它只是改变了背景，但没有改变 php 内容。

Answer 1

jQuery 本身有一个方便的函数 jQuery(...).load，使用它 jQuery 将处理所有必要的点:

function reloadMiddleWith(theme, page, content) {
    var new_url = "http://www.chrisjohndesigns.com/" + page + ".php/#" + content;
    $('#live-area').addClass(theme);
    jQuery("#area-loader").load(new_url);
}

更多信息请查看documentation page出。