jQuery - 获取正确的用户 ID - AJAX

Posted 2023-05-09

【中文标题】jQuery - 获取正确的用户 ID - AJAX

【英文标题】：jQuery - Getting Correct UserID - AJAX

【发布时间】：2021-04-28 17:40:51

【问题描述】：

所以我在这里有点束缚。所以我有 2 个 jQuery 脚本来处理一个简单的数据库行更新（每个用户 ID，会话），这让用户发送一个“礼物”，为用户数据库行列“奖金”增加价值。

我几乎完美地完成了这项工作，但问题是：赠送时只会获得结果的第一个 ID，而不是任何其他用户 ID。我怀疑这是循环逻辑中的错误。

RequestBin 告诉我我自己有正确的 ID，并且用户 ID 卡在第一个迭代的用户 ID 上（我们不能发送给任何其他用户 ID）。我们需要能够赠送任何结果（用户 ID）。

我们使用一个对话框来触发带有 Yes / No 的 AJAX 调用。Yes 触发 AJAX 事件，没有关闭模型。

AJAX JS - 向数据库发送值

function ConfirmDialog(message) 
    $('<div></div>').appendTo('body')
        .html('<div><h6>' + message + '</h6></div>')
        .dialog(
            modal: true,
            title: 'Gift this user new Gift?',
            zIndex: 10000,
            autoOpen: true,
            width: '600',
            height: '200',
            resizable: false,
            buttons: 
                Yes: function () 
                    $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
                    $(this).dialog("close");
                    var sender = $('input[name=sender]').val();
                    var receiver = $('input[name=receiver]').val();
                    $.ajax(
                        url: 'https://xxxxx.m.pipedream.net',
                        type: 'POST',
                        data: 
                            sender: sender,
                            receiver: receiver
                        ,
                        beforeSend: function () 
                            $('#gift-bonus-status').text('Sending...').delay(100).fadeIn().delay(100).fadeOut();

                        ,
                        success: function (response) 
                            $('#gift-bonus-status').text('Gift Sent!').delay(100).fadeIn().delay(100).fadeOut();
                        
                    );
                ,
                No: function () 
                    $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

                    $(this).dialog("close");
                
            ,
            close: function (event, ui) 
                $(this).remove();
            
        );
;

function fetchTopTransfers() 
    $(function () );
    $.ajax(
        url: '/ajax/ajax_user_list.php',
        method: 'GET',
        dataType: 'JSON',
        success: function (data) 
            var html_to_append = '';
            $.each(data, function (i, item) 
                $('input[name=receiver]').val(item.user_id);
                html_to_append +=
                    '<div style="float:left"><a href="/details/?id=' + item.product_id + '/"><img src="/images/' + 
                    item.cover + '" style="width:50px;height:75px;margin:5px" /></a></div><a href="/user/?id=' + 
                    item.user_id + '/"><img src="/' + item.avatar + '" style="width:45px;height:45px;border-radius:50%;margin:5px" /></a><div style="float:right;padding:10px;text-align:right"><b>' + 
                    formatBytesProduct(item.speed) + '</b><div style="padding-top:5px;text-align:right"><span class="material-icons" style="vertical-align:middle;color:#C0C0C0">redeem</span> <a onclick="ConfirmDialog(\'Do you wish to gift ' + item.username + ' with gift? This will deduct 70 points from your current balance.\')" id="gift-bonus-status">Give Gift</a></div></div><div style="padding-bottom:5px">' + 
                    item.name + '</div><div style="max-width:235px;margin-left:60px;margin-top:-4px;background:#D3D3D3;border-radius:4px;overflow:auto"><div style="height:15px;width:' + 
                    item.progress + '%;background:#E92324;padding:5px;text-align:center;color:#FFF;border-radius:4px">' + 
                    item.progress + '%</div></div></div><div style="clear:both"></div><input type="hidden" name="sender" value="<?=$account->getId()?>" /><input type="hidden" name="receiver" value="' + 
                    item.user_id + '" />';
            );
            $("#top-transfers").html(html_to_append);
        
    );

fetchTopTransfers();
setInterval(function () 
    fetchTopTransfers()
, 5000);

AJAX 响应：

这里发生了什么？？？

非常感谢任何帮助

【问题讨论】：

到底哪里出了问题？是向服务器发送了错误的 ID，还是从服务器接收到了错误的 ID？或者是其他东西？您说的是错误的 ID，但您的代码中有几个地方使用了 ID。请更具体。

列出了 4 个用户。每个都有一个唯一的用户 ID。我们只能随时检索第一个用户 ID，它会忽略 GET/JSON 结果中的其他 3 个用户

好的。您的页面中有多少个带有name=receiver 的输入框？因为$('input[name=receiver]').val() 会在您每次运行该命令时设置所有这些的值。这就是正在发生的事情吗？它将所有输入设置为相同的 ID？您仍然对所看到的确切行为有点模糊。

这正是正在发生的事情。我们有 2 个输入框（没有其他地方），在第一个 JS 函数中保存这些值，并使用从 AJAX 数据接收回的内容更新接收者隐藏输入。这是 $.each() 的问题吗？

抱歉，我不确定你在说什么。我所说的只是删除一行代码。这不会删除脚本设置用户 ID 的能力 - 就像我说的，<input type="hidden" name="receiver" value="' + item.user_id + '" /> 行已经设置了正确的值。

【参考方案1】：

由于名称为 receiver 的输入很多，这就是您无法传递正确值的原因。因此，在您的 ConfirmDialog 函数中，通过 this 也将引用被单击的当前元素。然后，在您的函数中获取所需的值，您可以使用$(this).closest(".outer").find(..)..。

演示代码：

//just for demo..
var data = [
  "user_id": 1,
  "product_id": 12,
  "username": "acc",
  "name": "swi",
  "progress": "20",
  "speed": 15
, 
  "user_id": 2,
  "product_id": 12,
  "username": "acc",
  "name": "swi22",
  "progress": "10",
  "speed": 12
]
var html_to_append = "";
$.each(data, function(i, item) 
  //give outer div.. also pass `this` inside your function
  html_to_append +=
    '<div class="outer"><div style="float:left"><a href="/details/?id=' + item.product_id + '/"><img src="/images/' +
    item.cover + '" style="width:50px;height:75px;margin:5px" /></a></div><a href="/user/?id=' +
    item.user_id + '/"><img src="/' + item.avatar + '" style="width:45px;height:45px;border-radius:50%;margin:5px" /></a><div style="float:right;padding:10px;text-align:right"><b>' +
    (item.speed) + '</b><div style="padding-top:5px;text-align:right"><span class="material-icons" style="vertical-align:middle;color:#C0C0C0">redeem</span> <a onclick="ConfirmDialog(\'Do you wish to gift ' + item.username + ' with gift? This will deduct 70 points from your current balance.\',this)" >Give Gift</a></div></div><div style="padding-bottom:5px">' +
    item.name + '</div><div style="max-width:235px;margin-left:60px;margin-top:-4px;background:#D3D3D3;border-radius:4px;overflow:auto"><div style="height:15px;width:' +
    item.progress + '%;background:#E92324;padding:5px;text-align:center;color:#FFF;border-radius:4px">' +
    item.progress + '%</div></div><div style="clear:both"></div><input type="hidden" name="sender" value="23" /><input type="text" name="receiver" value="' +
    item.user_id + '" /></div>';
);
$("#top-transfers").html(html_to_append);
//add el it refer to `this`
function ConfirmDialog(message, el) 
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '</h6></div>')
    .dialog(
      modal: true,
      title: 'Gift this user new Gift?',
      zIndex: 10000,
      autoOpen: true,
      width: '600',
      height: '200',
      resizable: false,
      buttons: 
        Yes: function() 
          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
          $(this).dialog("close");
          //get closest div(outer) then find required inputs values
          var sender = $(el).closest(".outer").find('input[name=sender]').val();
          var receiver = $(el).closest(".outer").find('input[name=receiver]').val();
          console.log("Reciver --" + receiver + " Sender ---" + sender)
          $.ajax(
            url: 'https://xxxxx.m.pipedream.net',
            type: 'POST',
            data: 
              sender: sender,
              receiver: receiver
            ,
            beforeSend: function() 
 //use el here as well.. 
 $(el).text('Sending...').delay(100).fadeIn().delay(100).fadeOut();

            ,
            success: function(response) 
            //use el here as well
              $(el).text('Gift Sent!').delay(100).fadeIn().delay(100).fadeOut();
            
          );
        ,
        No: function() 
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

          $(this).dialog("close");
        
      ,
      close: function(event, ui) 
        $(this).remove();
      
    );
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<div id="top-transfers">
</div>