javascript - 将 php 变量传递给 jquery 并使用它在 jquery 对话框中显示数据

Question

我正在努力寻找一种在 jquery 对话框中动态显示 mysql/php 查询数据的方法。简而言之，我有一个带有 mysql 结果的 html 表。每个 tr 在其结果旁边的 anchor 标记内都有一个图标，其中包含相应的 mysql id。

echo '<a href="index.php?word_id=' . $row['word_id'] . '" class="clickable"><i class="fa fa-table"></i></a>';

当我单击图标时，jquery 应该将 id 传递给新查询，并打开包含新 html 表和适当 mysql 结果的对话框。

<div id="ui-dialog-first">
<?php
$query = "SELECT alt1.pron AS pron, alt1.word_form AS word1, alt2.word_form AS word2 FROM alter alt1  LEFT JOIN  alter alt2 ON alt2.pron = alt1.pron WHERE alt1.word_id = '$word_id'";
    $result = mysqli_query($con, $query);
    if (mysqli_num_rows($result) > 0) {
        echo "<table class='alter' style='visibility:hidden;'>";
        while ($row = mysqli_fetch_array($result)) {
        echo "<tr><td>" . $row['pron'] . "</td><td>" . $row['word1'] ."</td><td>" . $row['word2'] . "</td></tr>";                 
}
    echo "</table>";
    ?>  
</div>

我尝试了我能找到和想到的一切，但是当 jquery 对话框打开时，我得到的只是初始 html 表最后一行的结果，无论我点击哪个图标。这是我的jquery代码，没有对id进行实验:

$(document).ready(function(){
    $('.clickable').click(function(event){
        event.preventDefault();
        $('.ui-dialog-first').dialog({
            open: function(){
                $(this).dialog('option', {
                'minWidth': 700,
                'minHeight': 500, 
                'padding-bottom': 20
                });
                $(this).dialog({
                    classes: {
                        'ui-dialog-titlebar': 'custom-green'
                    }
                });
            }
        });
        $('.alter').css('visibility', 'visible');
         $.ajax({
            url: "index.php",
            method: 'GET',
            data: "{pron:" + pron + "word1:" + word1 + "word2:" + word2 +"}",
            success: function(data)
            {
               $('.alter').html(data);
            }
        });
    });
});

我的问题，有没有办法将 word_id 从 anchor 标记传递到查询，然后打开包含相应结果的对话框？

Answer 1

您始终可以使用 JQuery 从标记中获取 href，然后解析字符串以获取 word_id，但更简单的方法是使用 word_id 为标记分配 id 属性。所以就像，

echo '<a id="' . $row['word_id'] .'".....

然后在点击处理程序中使用 JQuery 来获取 id，例如 event.target.id，但请务必将 id 分配给一个变量，该变量随后具有 ajax 数据部分的范围。

$(document).ready(function(){
$('.clickable').click(function(event){
    var word_id = event.target.id;
    event.preventDefault();
    $('.ui-dialog-first').dialog({
        open: function(){
            $(this).dialog('option', {
            'minWidth': 700,
            'minHeight': 500, 
            'padding-bottom': 20
            });
            $(this).dialog({
                classes: {
                    'ui-dialog-titlebar': 'custom-green'
                }
            });
        }
    });
    $('.alter').css('visibility', 'visible');
     $.ajax({
        url: "index.php",
        method: 'GET',
        data: "{pron:" + pron + "word1:" + word1 + "word2:" + word2 +"word_id:" + word_id + "}",
        success: function(data)
        {
           $('.alter').html(data);
        }
    });
});

然后您可以在后端的查询中使用正确的 word_id。希望有帮助。