將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對話框時，我得到的只是inital 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從錨標記傳遞到查詢，然后打開具有相應結果的對話框？

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。 希望能有所幫助。