简单的ajax onclick问题

时间:2009-06-07 23:43:15

标签: php jquery ajax

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

3 个答案:

答案 0 :(得分:8)

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

答案 1 :(得分: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>

答案 2 :(得分:0)

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>

但是加载方法代码更清晰。