为什么我的代码总是向 php 脚本提交完全相同的 id (myId)？

Question

我正在尝试通过 ajax 处理内部消息传递，使用间隔来减慢查询速度，因为它们有时可能有数百个。然而，我的代码总是提交相同的表单数据，即使 id 是通过 for() 循环自动递增的。

这是我的 HTML：

<form id="form" action="index.php" method="post">
    <input type="hidden" id="users" value="2|5|7|8|20" />
    <div class="form-group">
        <label>Message:</label>
        <textarea name="message" id="msg" class="form-control" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-info">Send Message</button>
</form>

这是我的 jQuery 代码：

$("#form").submit(function(e){
    e.preventDefault();
    var str = $('#users').val();
    var message = $('#msg').val();
    var strArr = str.split('|');
    for(i=0; i < strArr.length; i++){
        var myId = strArr[i];
        var formdata = "action=messaging_text&id="+myId+"&message="+message+"";
        var timerId = 0,
        timerId = setInterval(function(){
            $.ajax({
                type: "POST",
                url: 'index.php',
                data: formdata,
                dataType: 'json'
            }).done(function(mydata) {
                $("#status").append("Sent Text Message to <span style=\"color:green\">"+mydata.name+"</span><br>");
                clearInterval(timerId);
            });
        }, 6000);
    }
});

Answer 1

检查此代码并根据它修复您的代码。看看html也变了。

$("#sumb_form").click(function(e){
    e.preventDefault();
    $("#status").html('');
    var str = $('#users').val();
    var message = $('#msg').val();
    var strArr = str.split('|'); 
    var sec = 6000; //6 seconds
    
    strArr.forEach((val, ind) => {
       
       var formdata = "action=messaging_text&id="+val+"&message="+message+""; 

      setTimeout(() => {
           /*$.ajax({
                type: "POST",
                url: 'index.php',
                data: formdata,
                dataType: 'json'
            }).done(function(mydata) {
           */
           // $("#status").append("Sent Text Message to <span style=\"color:green\">"+mydata.name+"</span><br>");
              $("#status").append("Sent Text Message to <span style=\"color:green\">"+val+"</span><br>"); // this is for snippet
              console.log(formdata); // this is for snippet
           /*   
            });
          */  
      }, ind * sec)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="status"></div>
<form id="form" action="index.php" method="post">
    <input type="hidden" id="users" value="2|5|7|8|20" />
    <div class="form-group">
        <label>Message:</label>
        <textarea name="message" id="msg" class="form-control" rows="5"></textarea>
    </div>
    <button id="sumb_form" class="btn btn-info">Send Message</button>
</form>