Ajax 重复提交问题处理方案

Ajax 重复提交问题处理方案

注：ajax重复提交原因，是ajax是异步的，在网络延迟或者服务器卡顿时候，多次点击提交按钮会重复提交。

一、方案1，简单方式处理ajax重复提交，使用变量控制

1.js代码

    //标记是否提交
    var isSubmit=false;
    $('#Submit').click(function(){
         if(isSubmit)return false;

         var name=$('#Name').val();
         var mobile=$('#Mobile').val();
        isSubmit=true;
        $.post('/home/add',{name:name,
        mobile:mobile
        },res=>{
            isSubmit=false;
            console.info(res);
        });
        return false;
    });

2.html代码

<form>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">姓名</label>
        <input type="text" class="form-control" id="Name" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">电话</label>
        <input type="text" class="form-control" id="Mobile">
    </div>
    <button type="submit" id="Submit" class="btn btn-primary">提交</button>
</form>

3.后台代码

LogStandard.LogHelper _log = new LogStandard.LogHelper();
public IActionResult Add(string name, string mobile)
{
    try
    {

        Thread.Sleep(1000);

        _log.WriteLine($"姓名：{name}，电话：{mobile}");

        return Content("保存成功");
    }
    catch (Exception ex)
    {
        return Content(ex.Message);
    }
}

二、

更多方案待完善。。。

更多：

 JQuery 键盘事件使用整理

 JQuery 鼠标事件使用汇总

 Jquery 事件绑定使用整理