简单的ajax onclick问题答案

【问题标题】：Simple ajax onclick question简单的ajax onclick问题
【发布时间】：2009-06-07 23:43:14
【问题描述】：

我在设置一个在 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>

【问题讨论】：

有任何代码可以解决这个问题吗？ ;)

标签： php jquery ajax

【解决方案1】：

jQuery 有一个特定的方法可以做到这一点：load()。

我会稍微改变你的例子，所以链接的 href 指向 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;
   });
});

【讨论】：

【解决方案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>

【讨论】：

如果你还没有安装 Firebug（比 Firefox 的 javascript 控制台好得多），让我们看看 js 错误输出。
嗯，没有错误出现，但它没有加载 php 文件。我想我做错了什么。
所以要调试：我更改行 var file = 'google.com';还是什么都没出现
（我把它改成了“http://www.google.com”，只是没有出现在cmets上）
您不能对来自另一个域的文件发出 ajax 请求。会不会是这个问题？

【解决方案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>

但是加载方法的代码更简洁。

【讨论】：

已修复；谢谢你抓住那个。除非您不介意它带来的 ajax 默认值（例如，没有缓存），否则 load() 方法并不是真正需要的。