【问题标题】:How can I pass two parameters to a script from within a php foreach loop?如何从 php foreach 循环中将两个参数传递给脚本?
【发布时间】:2019-03-18 22:35:30
【问题描述】:

我有一个 php foreach 循环通过数据库中的记录运行。 foreach 添加了一个新的表格行,显示数据库中的联系人,例如姓名、地址等。我正在使用 href 链接来触发 ajax/jquery 脚本,该脚本会将该条目添加到工作人员列表表中。该脚本位于 foreach 循环中,因此我可以访问要发送的数据。

我的问题是第一行工作正常,然后任何其他记录都不会触发脚本。我在想可能是因为脚本无法使用相同的 ID 触发?所以我将联系人 ID 添加到 href。

<a id="addCrewLink'.$contact->person_id.'" href="/pages/voyages/crewlists/add.php?item='.$contact->person_id.'&type=crew" class="btn btn-sm btn-outline-primary">crew</a>

这不起作用。我认为我需要将脚本移出 foreach 循环,既因为它位于我要更新的表的上方,又因为有一个充满脚本的表可能是不好的做法!

我可以使用链接传递参数然后一个脚本来获取链接吗???

$(document).ready(function() {
    $("#addCrewLink<?php echo $contact->person_id;?>").click(function(e) {
        e.preventDefault();
        var personID = '<?php echo $contact->person_id;?>';
        var voyageID = '<?php echo Input::get('voyage'); ?>';
        var passageID = '<?php echo Input::get('passage'); ?>';
        var role = '<?php echo $contact->role;?>';
        $.ajax({
                type: "POST",
                url: "/pages/voyages/crewlists/add.php",
                dataType: 'json',
                data:{ person: personID, embarkingAs: role, voyage: voyageID, passage: passageID },
                'success': function(data) {
                    if(data['success']) {
                        //refresh the tables
                        $("#crewTable").load(location.href + " #crewTable");
                        //$("#passengerTable").load(location.href + " #passengerTable");
                        //send the user a success message
                        resetToastPosition();
                        $.toast({
                                heading: 'Success',
                                text: 'Waypoint added successfully',
                                textColor: 'white',
                                showHideTransition: 'slide',
                                hideAfter : 7000,
                                icon: 'success',
                                loaderBg: '#f96868',
                                position: 'top-center'
                        })
                    } else {
                        var i;
                        for (i = 0; i < data['message'].length; i++) {
                            //scroll to the top
                            window.scrollTo({ top: 0, behavior: 'smooth' });
                            this.error(this.xhr, data['message'][i]);
                    }
                }
            },
            'error': function(jqXHR, textStatus, errorThrown) {
                //send the user a fail message
                resetToastPosition();
                $.toast({
                  heading: 'Error',
                  text: textStatus,
                  textColor: 'white',
                  showHideTransition: 'slide',
                  hideAfter : 7000,
                  icon: 'error',
                  bgColor: '#f96868',
                  position: 'top-center',
                  loaderBg: '#405189'
                })
            }
        })
    });
});

非常感谢大家的帮助!

问候

马特

【问题讨论】:

  • 对每个链接使用单独的点击处理程序没有多大意义。您应该编写一个适用于所有这些链接的函数。首先通过类而不是 id 选择它们。例如,您需要在每种情况下发送的单个数据可以放在这些链接本身的自定义数据属性中,以便您的点击处理程序可以从那里读取它们。

标签: php ajax


【解决方案1】:

差不多了。我的建议是进行以下更改:

  • 更改锚点,使它们都具有add-crew-link
  • 在每个锚点上添加所需数据的数据属性

以类似的方式结束:

<a class="add-crew-link" data-id="1" href="..." class="btn btn-sm btn-outline-primary">crew</a>
<a class="add-crew-link" data-id="2" href="..." class="btn btn-sm btn-outline-primary">crew</a>
<a class="add-crew-link" data-id="3" href="..." class="btn btn-sm btn-outline-primary">crew</a>
<a class="add-crew-link" data-id="4" href="..." class="btn btn-sm btn-outline-primary">crew</a>

注意:根据需要添加额外的data- 属性。比如data-name或者data-age,或者其他什么的。

  • 更改点击处理程序以定位所有add-crew-link 锚点:

    $('.add-crew-link').click(function(e) {

  • 在点击处理函数开始时获取id 和您需要的其他数据属性:

    var personID = $(this).data('id');

当然还要确保函数不再在 PHP 循环中。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-14
    • 2011-08-20
    • 1970-01-01
    相关资源
    最近更新 更多