简单的Ajax的onclick问题 [英] Simple ajax onclick question

问题描述

我有困难的设立是对一个div中显示结果的简单的菜单：

我有10个链接而链接到PHP文件我的服务器返回数据的列表。 我想这样，当浏览者点击其中一个链接，从PHP文件中的数据将显示在屏幕上的一个分区中，然后当他点击另一个链接，它会显示从PHP文件中的数据在格框（更换previous文本）。

我知道这是pretty的简单，但我不能得到它的工作。我使用jQuery，并想知道，如果你们有任何快速解决办法。

谢谢！

更新：我一直在pretty的太多失败的javascript code-明智的。但在这里是为框架的基本思路：

 ＆LT; D​​IV CLASS =标签＆GT;
        ＆LT; UL类=tabNavigation的风格=浮动：左;填充：1px的;＆GT;
            ＆LT;李＆GT;＆LT; A HREF =＃displayphpfile＆GT;负载phpfile1＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;李＆GT;＆LT; A HREF =＃displayphpfile＆GT;负载phpfile2＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;李＆GT;＆LT; A HREF =＃displayphpfile＆GT;负载phpfile3＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
        ＆LT; D​​IV ID =displayphpfile＆GT;
            ＆其中p为H.;加载phpfile1＆所述; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

jQuery有这样做的一个具体方法：负载（）

我会改变你的例子虽然很少，所以链接的的HREF指向php文件：

 ＆LT; D​​IV CLASS =标签＆GT;
    ＆LT; UL类=tabNavigation的风格=浮动：左;填充：1px的;＆GT;
        ＆LT;李＆GT;＆LT; A HREF =phpfile1.php＆GT;负载phpfile1＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李＆GT;＆LT; A HREF =phpfile2.php＆GT;负载phpfile2＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李＆GT;＆LT; A HREF =phpfile3.php＆GT;负载phpfile3＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; D​​IV ID =displayphpfile＆GT;
        ＆其中p为H.;加载phpfile1＆所述; / P＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

那么code是很简单的：

  $（文件）。就绪（函数（）{
   $（tabNavigation一）。点击（函数（）{
      $（＃displayphpfile）加载（$（本）.attr（HREF））;

      返回false;
   }）;
}）;
 

I'm having difficulty setting up a simple menu that displays results on a div box:

I have a list of 10 links which link to php files on my server that return data. I would like it so that when the viewer clicks on one of the links, the data from the php file will display on a div box on the screen, and then when he clicks on another link, it will display the data from that php file in the div box (replacing the previous text).

I know this is pretty simple, but I can't get it to work. I'm using jQuery, and would like to know if any of you have any quick solutions.

Thanks!!

UPDATE: I've been pretty much failing javascript code-wise. But here is the basic idea for the framework:

 <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>

解决方案

jQuery has a specific method for doing that: load().

I would change your example a little though, so the hrefs of the links point to the php file:

<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>

Then the code is very simple:

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

      return false;
   });
});

这篇关于简单的Ajax的onclick问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！