只提交一条数据的时候,可以正常接收到返回值,并弹窗提示“已成功下单!”,两条或以上就没有提示了,但是数据库是已经写入数据了的。
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;
}
}
?>
```
可能是因为在成功回调函数中只考虑了单条数据的情况,需要在提交多条数据后的回调函数中进行遍历处理。
可以在按钮点击事件中添加禁用按钮代码,或者在成功回调函数中重新启用按钮。此外,也可以使用防抖函数或节流函数来防止多次提交。
以下是可能的修改方案:
修改成功回调函数,遍历处理多条数据
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();
});