簡單的ajax onclick問題

Question

我在設置一個在div框上顯示結果的簡單菜單時遇到了困難：

我有一個10個鏈接的列表，鏈接到我的服務器上返回數據的PHP文件。 我希望這樣當觀眾點擊其中一個鏈接時，來自php文件的數據將顯示在屏幕上的div框中，然后當他點擊另一個鏈接時，它將顯示來自該php文件的數據在div框中（替換以前的文本）。

我知道這很簡單，但我不能讓它工作。 我正在使用jQuery，並想知道你們是否有任何快速的解決方案。

謝謝！！

更新：我幾乎失敗了javascript代碼。 但這是框架的基本思想：

 <div class="tabs">
        <ul class="tabNavigation" style="float:left; padding:1px;">
            <li><a href="#displayphpfile">Load phpfile1</a></li>
            <li><a href="#displayphpfile">Load phpfile2</a></li>
            <li><a href="#displayphpfile">Load phpfile3</a></li>
        </ul>
        <div id="displayphpfile">
            <p>Load phpfile1</p>
        </div>
    </div>

Answer 1

jQuery有一個特定的方法：load（）。

我會稍微改變你的例子，所以鏈接的hrefs指向php文件：

<div class="tabs">
    <ul class="tabNavigation" style="float:left; padding:1px;">
        <li><a href="phpfile1.php">Load phpfile1</a></li>
        <li><a href="phpfile2.php">Load phpfile2</a></li>
        <li><a href="phpfile3.php">Load phpfile3</a></li>
    </ul>
    <div id="displayphpfile">
        <p>Load phpfile1</p>
    </div>
</div>

然后代碼很簡單：

$(document).ready(function() {
   $(".tabNavigation a").click(function() {
      $("#displayphpfile").load($(this).attr("href"));

      return false;
   });
});

Answer 2

我沒有測試過這個，但這是否接近你想要的？

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                url:file,
                cache:false,
                success: function(response) {
                    $('#data_goes_here').html(response);
                }
            });
            return false;
        });
    });
</script>
<ol>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a>
    <li><a href="#">Baz</a></li>
</ol>

<div id="data_goes_here"></div>

Answer 3

Bipedal Shark在點擊元素中調用document.ready！

它應該是：

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                    url:file,
                    cache:false,
                    success: function(response) {
                            $('#data_goes_here').html(response);
                    }
                });
            return false;
            });
        });
</script>

但是加載方法代碼更清晰。