如何通过jQuery将PHP调用与来自PHP的动态参数绑定

Question

我是jQuery的新手-这是我第一次尝试.我已经做了两天了，但不能让它工作.

有一个列表，由PHP动态创建。如果用户使用fontawese-减号图标单击span元素，则应向删除单个条目的API触发XHR请求。如果我使用一个按钮元素，该函数将按原样执行，但我不知道如何使它与动态添加的ID一起工作，以及如何将它们传递给AJAX查询。

很多时间，有功能，点击等等，都不适合我.

Ajax部分：

   <script charset="UTF-8" type="text/javascript">
        jQuery(document).ready( function($) {
            $("button").click(function (e) {
                var getthevalue = $(e).attr('id');
                alert(getthevalue);
                console.log("Abfrage ob LFZ geloescht werden soll.");
                swal({
                        title: "LFZ aus Flotte loeschen?",
                        text: "Das ausgewaehlte Luftfahrtzeug wirklich aus Ihrer persönlichen Flotte loeschen?",
                        type: "warning",
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, delete it!",
                        cancelButtonText: "No, cancel pls!",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    },
                    function () {

                        console.log("Starte XHR Request zum loeschen eines LFZ aus der eigenen Flotte");
                        $.post("http://____/fleetdb_removeFromOwnFleet.php",
                            {
                                userId: "<? echo $toolbox_user_id; ?>",
                                userPasswd: "<? echo getUserPasswd($toolbox_user_id); ?>",
                                lfzDbId: "lalala"
                            },
                            function(data,status){
                                alert("Data: " + data + "\nStatus: " + status);
                            });

                        setTimeout(function () {
                            swal("Ajax request finished!");
                        }, 2000);
                    });
            });
        });
        </script>

HTML，动态输出部分：

    <?
    $sql = $wpdb->get_results("SELECT * FROM `xx` WHERE `user_id`='$toolbox_user_id'");
    foreach ($sql as $dbentry) {
        $lfzId = $dbentry->lfz_id;
        $sql2 = $wpdb->get_results("SELECT * FROM `xx` WHERE `id`='$lfzId'");
        foreach ($sql2 as $lfzdbentry) {
            $dbEntryId = $lfzdbentry->id;
            $lfzReg = $lfzdbentry->reg;
            $lfzManufacturer = $lfzdbentry->manufacturer;
            $lfzType = $lfzdbentry->type;
            $lfzHomebase = $lfzdbentry->homebase;
            ?>
            <tr>
                <td>##</td>
                <td><? echo "#".$dbEntryId." "; ?><? echo $lfzReg; ?></td>
                <td><? echo $lfzManufacturer." ".$lfzType; ?></td>
                <td>
                    <span class="tooltips" style="cursor: pointer;">
                        <a rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen">
                            <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
                        </a>
                    </span>
                   [...morespanswithfunctions...]
                </td>
            </tr>
            <?
        }
    }
    ?>

如何将$dbEntryId传递给jQuery调用？谢谢。

Answer 1

选项1

首先，您不希望在<button>上触发click。因此，您可以做的是:在html中添加一个按钮，如下所示：

<button class="delete" id="<? echo $dbEntryId; ?>">Delete</button> 

比在你的jQuery中：

$("button.delete").click(function () {
    var $this = $(this), // Pointing to the clicked element (a button in this case)
    $getTheValue = $this.attr('id');
    alert($getTheValue);

选项2

在html编辑中：

<a rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen">
    <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
</a>

至：

<a class="delete" rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen" data-id="<? echo $dbEntryId; ?>">
    <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
</a>

然后在jQuery

$("a.delete").click(function () {
        var $this = $(this), // Pointing to the clicked element (a button in this case)
        $getTheValue = $this.data('id');
        alert($getTheValue);

您还可以尝试在以下内容之一上添加选项2：span，甚至您的i icon

我希望这对你有所帮助。如果没有，请告诉我。

Answer 2

您需要通过每个链接传递一个唯一的id。

试着做这样的事情：

<?
    $sql = $wpdb->get_results("SELECT * FROM `xx` WHERE `user_id`='$toolbox_user_id'");
    foreach ($sql as $dbentry) {
        $lfzId = $dbentry->lfz_id;
        $sql2 = $wpdb->get_results("SELECT * FROM `xx` WHERE `id`='$lfzId'");
        foreach ($sql2 as $lfzdbentry) {
            $dbEntryId = $lfzdbentry->id;
            $lfzReg = $lfzdbentry->reg;
            $lfzManufacturer = $lfzdbentry->manufacturer;
            $lfzType = $lfzdbentry->type;
            $lfzHomebase = $lfzdbentry->homebase;
            ?>
            <tr>
                <td>##</td>
                <td><? echo "#".$dbEntryId." "; ?><? echo $lfzReg; ?></td>
                <td><? echo $lfzManufacturer." ".$lfzType; ?></td>
                <td>
                    <span class="tooltips" style="cursor: pointer;">
                        <a rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen">
                            <a href="javascript;" id="<?php echo $dbEntryId;?>" onclick="functioname(this.id)">
                              <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
                            </a>
                        </a>
                    </span>
                   [...morespanswithfunctions...]
                </td>
            </tr>
            <?
        }
    }
    ?>

在jQuery中调用函数并获取id。现在您可以使用这个id：

functionname(id){

    alert(id);
}