如何在php foreach循环中将两个参数传递给脚本?

时间:2019-03-18 13:18:45

标签: php ajax

我有一个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'
                })
            }
        })
    });
});

非常感谢您提供的所有帮助!

致谢

马特

1 个答案:

答案 0 :(得分: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-namedata-age等。

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

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

  • 在点击处理程序功能开始时获取所需的id和其他数据属性:

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

当然,请确保该函数不再位于PHP循环内。