jquery和ajax加載php內容

Question

我有一個<div class="container"> ，它將顯示位於內容文件夾中的獨立php文件的內容，這些文件鏈接到<ul>顯示的各個<a>標簽。 單擊列表中的鏈接后，將在容器中顯示加載圖形（processing ...） class="process"並顯示被調用的php文件。

HTML（淡化）：

<div class="container"></div>

<ul id="yourIdeas">
  <li><a href="one">one</a></li> <!--content/one.php-->
  <li><a href="two">two</a></li>
  <li><a href="three">three</a></li>
  <li><a href="four">four</a></li>
</ul>

容器/裝載圖形，樣式等都很好。

JQUERY：

(function() {
  var typ = {
  loading: $('<div />', { class: 'process' }),
  area: $('.container')
  }

  var file = $('ul#yourIdeas li a').attr('href');
  var thePage = $('content/' + file + '.php');

  $('ul#yourIdeas li a').on('click', function() {
    $.ajax({
        url: 'thePage',
        beforeSend: function() {
            typ.area.append(typ.loading);
        },
        success: function(data) {
            typ.area.html(data);
        }
    });
  });
});

我無法讓Jquery / Ajax執行此任務； 單擊ul#yourIdeas li a ，它將抓取href並將其關聯到指定的php文件，然后將其加載到容器中的“ processing ...”，然后在容器中顯示所選php文件的內容。

如果我專門要求每個鏈接，我可以使其工作；

碼：

var typ = {
  loading: $('<div />', { class: 'process' }),
  area: $('.container')
}

$('ul#yourIdeas li a#two').on('click', function() {
  $.ajax({
    url: 'content/two.php',
    beforeSend: function() {
        typ.area.append(typ.loading);
    },
    success: function(data) {
        typ.area.html(data);
    }
  });
});

但是，如果可能的話，我想擁有一個腳本來包含所有鏈接和文件。

在此先感謝您的幫助。

Answer 1

您必須在click函數中移動file和thePage變量：

(function() {
  var typ = {
    loading: $('<div />', { class: 'process' }),
    area: $('.container')
  };

  $('ul#yourIdeas li a').on('click', function(e) {
    e.preventDefault();
    var file = $(this).attr('href');
    var thePage = 'content/' + file + '.php';

    $.ajax({
        url: thePage,
        beforeSend: function() {
            typ.area.append(typ.loading);
        },
        success: function(data) {
            typ.area.html(data);
        }
    });
  });
});