0

我网站上的用户目前通过单击一个链接来查看一个人的详细信息，该链接将他们重定向到一个新页面，该页面使用 PHP 和 MySQL 显示该人的详细信息。我想更改它，以便在单击链接时，他们会在链接旁边显示的弹出窗口中看到详细信息。

在 jQuery 工具提示中显示这些细节将过于局限，因为最终我打算让用户与弹出窗口中的内容进行交互。

当页面加载太慢时，还会为每个链接添加一个对话框，因为页面上可能有 30 个或更多链接。页面完成加载前 2 秒或更长时间的延迟是不可接受的。我网站上的链接通常是在循环中创建的。

是否可以仅为单击的链接创建一个对话框？

我目前正在研究一种使用 jQuery Ajax 以及 jQuery 位置和对话框函数的方法。我希望解决方案尽可能轻量和简单，并避免任何页面刷新。

下面的代码显示了我想出的。当使用 Ajax 从数据库请求数据时，此代码甚至无法发布输入数据。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<?php
// Shows the links
for($id=0;$id<=80;$id++){
    echo("<a id='link$id' onclick=showPopup($id)>Click me at $id</a><br/>");
}
?>
<script>
function showPopup(id){
    // Gets input needed to return database records for the link clicked
    var myObj={};
    myObj["database"]="ajaxdb";
    myObj["sql"]="select * from names"; // A where clause here would be specific to the link
    var input = JSON.stringify(myObj);
    // Gets the data to show in the dialog using Ajax
    $.post('return_rows.php',input,function(data){
        // Data would be formated here before being assigned to the div
        // ....
        // ....
        $('div#dialog'+id).html(data);
    });
    // Shows the dialog using jQueryUI
    $(function() {
        $('a#link'+id).ready(function(){
        $('#dialog'+id).dialog();
            // Positions opened dialog relative to the clicked link.
            $('#dialog'+id).dialog('widget').position({
                my: 'right top',
                at: 'left bottom',
                of: 'a#link'+id
            });
        });
    });
    document.write("<div id='dialog'+id title='Title of dialog'+id></div>");
}
</script>
</body>
</html>

任何帮助获得有效的解决方案将不胜感激。但是请注意，我既不熟悉 Ajax 也不熟悉 jQuery。

4

1 回答 1

0

您可以使用AJAX为特定链接请求数据。让 URL 返回一个JSON对象，然后使用 jQuery 将其附加到正文中。

例如

function get_user_information(){
    $.ajax({
    url: url_that_returns_user_data.php,
    dataType: json,
    success: function(data){
        // parse the json data and append it to the body here
    },
    return false; // To avoid reloading the page
});
}
于 2012-12-24T15:10:53.967 回答