layui form批量提交数据是ajax接收不到返回值

Question

只提交一条数据的时候，可以正常接收到返回值，并弹窗提示“已成功下单！”，两条或以上就没有提示了，但是数据库是已经写入数据了的。
1，layui form批量提交数据是ajax接收不到返回值；
2，如何避免重复点击按钮后，重复提交数据；

 <form class="layui-form" action="" method="post" id="frm1" name="frm1">    
<div class="layui-form-item">           
                  <label for="L_email" class="layui-form-label">
                          <span class="x-red"></span>批量id</label>
                      <div class="layui-input-inline" style="width:440px">
                           <textarea id="ids" name="ids" autocomplete="off" class="layui-input" style="width:535px;" readonly ></textarea>        
                      </div>
     </div>
 <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button type="button" id="adddata" class="layui-btn" lay-submit lay-filter="add" >提交 </button>
                      <button type="reset" onclick="formReset()" class="layui-btn layui-btn-primary">重置</button>
                  </div>
</form>
<script>
//提交
        form.on('submit(add)', function(data){
            $.ajax({ 
                async : false,
                url:'./tijiao_do1.php',   
                method:'post',   
                data:data.field,    
                dataType:'JSON',
                /* beforeSend: function () {
                    // 禁用按钮防止重复提交
                    //$("#adddata").attr({ disabled: "disabled" });
                    $("#adddata").attr('disabled',true);
                    $("#adddata").val('正在提交中...');
                    }, */                
                success:function(res){   
                    if(res.code=='0'){   
                    layer.msg("已成功下单!",{icon: 1, time: 1000},function(){location.reload();}); //提交成功后刷新页面
                    }        
                    else      
                    alert(res.msg); 
                    $("#adddata").removeAttr("disabled");
                    },       
                    error:function (data) {
 
                    }     
            }); 
            return false;
        });
</script>

```php
tijiao_do1.php
<?php
  $location=$_POST['location'];
  $ids = $_POST['ids '];
require './connect_db.php';
  
  $ids =explode("\n",$ids );//分隔换行的数据，如果是逗号隔开的则用$sn=explode(',',$sn);
  //$ids =explode(PHP_EOL,$ids );//分隔换行的数据
  for($i=0;$i<count($ids );$i++)
  if(!empty(trim($ids [$i])))   //判断是否为空
   { 
   if (isset($_POST['location']) && $_POST["location"] == 'A') {
     $sql = "INSERT INTO sev_order (
  sn) VALUES (
  '$ids [$i]') ";   
   }else if(isset($_POST['location']) && $_POST["location"] == 'B') {
      $sql = "INSERT INTO sev_order (
  sn) VALUES (
  '$ids [$i]')"; 
   }else{
     $sql = "INSERT INTO sev_order (
  sn) VALUES (
  '$ids [$i]')";    
   }
   if($result = $conn->query($sql)){
        echo "{".'"code": 0,'.  '"msg": "发送成功"'."}";  //这个用来返回成功数据给layui
    }else{
      echo "失败"; $conn ->error;
    } 
   }
  ?>

```

Answer 1

可能是因为在成功回调函数中只考虑了单条数据的情况，需要在提交多条数据后的回调函数中进行遍历处理。
可以在按钮点击事件中添加禁用按钮代码，或者在成功回调函数中重新启用按钮。此外，也可以使用防抖函数或节流函数来防止多次提交。
以下是可能的修改方案：

修改成功回调函数，遍历处理多条数据

success: function(res) {
    var successCount = 0;
    var failedCount = 0;
    for (var i = 0; i < res.length; i++) {
        if (res[i].code == '0') {
            successCount++;
        } else {
            failedCount++;
        }
    }
    if (successCount > 0) {
        layer.msg("成功提交" + successCount + "条数据", { icon: 1, time: 1000 }, function() { location.reload(); });
    }
    if (failedCount > 0) {
        alert("提交失败" + failedCount + "条数据");
    }
    $("#adddata").removeAttr("disabled");
},

修改 PHP 文件，将所有数据的结果都返回给前端：

if ($result = $conn->query($sql)) {
    $success[] = array('code' => '0', 'msg' => '发送成功');
} else {
    $failed[] = array('code' => '-1', 'msg' => '发送失败');
}
echo json_encode(array_merge($success, $failed));

在按钮点击事件中添加禁用按钮代码

$("#adddata").attr('disabled', true);
$("#adddata").val('正在提交中...');

使用防抖函数或节流函数来防止多次提交

function debounce(func, wait) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        var context = this,
            args = arguments;
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}
var submitDebounce = debounce(function() {
    // 在这里写提交代码
}, 1000);
$("#adddata").click(function() {
    submitDebounce();
});