1

我有一个表，其中包含通过 PHP 从 MySQL 数据库读取的数据。第一列包含所有项目名称。现在，单击表格第一列中的td元素将链接到一个页面，该页面包含有关td中包含的项目的更多详细信息。

现在我想出了以下想法：

$(document).ready(function() {
    $('#table td:first-child').click(function() {
        $('div.main').animate({
            height: "50px"
        }, 600);
        setTimeout(function() {
            $('div.data').fadeIn(1000);
        }, 600);
    });
});

div.main是包含表的 div 容器。我现在要做的是向上滑动该容器并在其正下方淡入一个新的div容器，新容器 include()sa PHP 页面包含一个动态查询（伪代码，无字符串转义，简化版本）：

SELECT detail FROM items WHERE items.name = $_GET['name'];

我想不通的是，我是否以及如何告诉包含在淡入淡出的 div-container 中的 PHP 文件它必须从数据库中获取哪个项目名称的详细信息。

现在我可以通过JavaScript/jQuery读取项目名称，但我想不出办法将该值传递给 PHP 文件，而无需重新加载页面。

欢迎任何想法或建议！

4

4 回答 4

1

我认为您正在寻找的是异步 JavaScript 和 XML (AJAX)。这听起来很吓人，但幸运的是 jQuery 让它变得非常简单。

您可以直接调用$.ajax()，但在大多数情况下，您可以使用其中一种方便的包装器。在这种情况下，我认为$.load()将满足您的需求。

因此，假设您的 PHP 文件被调用detail_ajax.php，它返回您希望放入 div 的 HTML（带有 class data）。那么你所要做的就是：

$('div.data').load( '/detail_ajax.php', function(data){
    $(this).html(data);
});

如果你想传递数据到detail_ajax.php，你可以这样传递：

$('div.data').load( '/detail_ajax.php', { 'someField' : 'someValue' },
    function(data) {
        $(this).html(data);
    }
});

在detail_ajax.php中，如果您检查$_POST['someField']，您将看到传入的值。

于 2013-07-25T05:55:11.450 回答
1

您正在寻找$.ajax()。但是，要按您的意愿发生，需要进行 3 件事。

首先，我们需要在由表生成的 HTML 中保存一个引用，以便我们可以简化服务器请求。生成表时，将唯一data-name字符串添加到 TD。

<td data-name="<?php echo $row['name']; ?>">

例如，如果 td 是在foreach循环中生成的，我们期望array返回一个。

现在，我们需要检测页面上的请求，以便我们可以正确地将数据返回到浏览器，我们将$_GET['name']按照您的示例进行查找。

<?php
if(isset($_GET['name'])):
    $mysqli = new mysqli('host', 'user', 'pass', 'db');
    $ret;
    if($stmt = $mysqli->prepare('SELECT detail FROM items WHERE items.name = ?')):
        $stmt ->bind_param('s', $_GET['name']);
        $stmt ->execute();
        $stmt ->bind_result($details); // we only want one column
        $stmt ->fetch(); //get our row
        $ret['success'] = TRUE;
        $ret['html'] =  '<div>'. $details .'</div>';
    else:
        $ret['success'] = FALSE; 
    endif;
    echo json_encode($ret); //return to the browser
endif;
?>

现在我们需要使用 ajax 来弥合服务器和浏览器之间的鸿沟。

编辑- 我忘了修改点击功能。

$('#table td:first-child').click(function() {
    $('div.main').animate({
        height:'0px'                    
    }, function(){
        //once the animation completes
        $.ajax({
            url: '/',
            type: 'GET', //this is default anyway
            data:{name: $(this).data('name')}, //send the name from the td clicked
            dataType: 'json', //what we expect back from the server
            success: function(data){ //will fire when complete. data is the servers response
                if(data.success !== false){
                    $('div').html(data.html);
                    $('div.main').animate({
                        height: "50px"
                    }, 600);
                }else{
                    alert("Something went wrong");
                }
            }
        }); 
    }, 600);
});
于 2013-07-25T05:57:38.037 回答
1

您可以通过使用 ajax 来做到这一点。以 JSON 格式在单独的页面上输出您的查询，然后使用 jquery ajax 获取它

于 2013-07-25T05:51:14.393 回答
1

你需要使用 ajax 来做同样的事情。创建一个像 onclick 这样的事件并在 js 中调用 click 调用 ajax set 变量的方法并将其传递给并按照您的意愿执行，在特定的 div 中显示数据作为响应。希望它会帮助你。

于 2013-07-25T05:52:28.377 回答