使用 jQuery 单击链接时加载相关数据答案

【问题标题】：load revelant data when clicking on link using jQuery使用 jQuery 单击链接时加载相关数据
【发布时间】：2011-04-21 11:33:59
【问题描述】：

您好，我正在尝试为我的网站制作通讯簿，并且正在考虑使用两个窗格。左侧是联系人姓名，右侧是联系人详细信息。

我可以使用 while 循环加载联系人窗格以循环浏览我的查询，但后来我想我真的不知道如何在用户单击特定联系人姓名时加载该联系人的详细信息。

我该如何解决这个问题？

【问题讨论】：

两个窗格之间的html有什么关系？
窗格 1 说有 John Doe，您点击 John Doe，然后在窗格 2 中您会看到他的信息，例如地址、编号、评论等

标签： php jquery sql

【解决方案1】：

如果你有类似的东西：

<div id="contactNamesPane">
 <ul>
    <li><a href="#" class="names" id="johnDoe">Doe, John</a></li>
 </ul>
</div>

<div id="contactDetailsPane">
</div>

$('contactNamesPane a.names').click(
   var thisContactId = $(this).attr('id');
   $('contactDetailsPane')
        .load('http://path/to/script.php?contactId=' + thisContactId + ' #' + thisContactId);
);

假设您有一个 php 脚本来生成联系人详细信息（位于 http://path/to/script.php 并且此脚本可以采用 GET 变量来显示特定的个人。

它还假定此数据将放置在 id 等于联系人姓名的元素中。

一个模糊连贯的演示发布在我的服务器上：http://davidrhysthomas.co.uk/so/loadDemo.html

【讨论】：

嗯，请原谅我在这里听起来有点离题，但我脑子里放了个屁，我似乎无法在这里形成一个完整的思想泡泡。在我的 addresbook.ajax.php 中，我在 SWITCH 语句中进行了查询，以根据使用情况执行操作。我需要做什么才能返回详细信息窗格将填充的数据？
啊，我明白了。你能发布你的例子的PHP部分吗
@s2xi，我建议提出单独的问题来解决这些问题。在编写上述内容时，我宁愿假设您已经整理好 php 部分。我无法发布 my php，因为数据是从静态 html 文件加载的，仅用于演示目的。
是的，我看到了 ;-) 多亏了你，我才能够得到 javascript 背后的逻辑。我想现在我只需要弄清楚如何从 sql 查询中输出。

【解决方案2】：

当您在左侧创建列表时，将联系人的 id 添加到 rel 中

<ul id="contacts">
    <li><a href="#" rel="ID_OF_CONTACT">Name Here</a></li>
    ...
</ul>

然后使用 jquery，您可以使用 rel 属性并向 php 页面执行 ajax 请求，该页面返回具有该 id 的联系人信息

$("#contact a").click(function() {

    var id = $(this).attr("rel");
    $.get("url_of_php_page", { id: id },
        function(data){
            // do something with the data
        }
    );

});

改用jquery.data

【讨论】：