jquery和ajax加載php內容

Question

我有一個<div class="container">這將顯示來自位於內容文件夾中的單獨的php文件的內容，鏈接到<ul>中提供的個人<a>標籤。點擊列表中的鏈接後，會在容器中顯示加載圖形（處理中......）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文件的內容。

我可以得到它的工作，如果我特別要求每個鏈接分開;

CODE：

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); 
     } 
    }); 
    }); 
});