如何验证 onkeyup 事件而无需一次又一次地发送 post 请求以在 laravel 中路由答案

【问题标题】：How to validate onkeyup event without again and again sending post request to route in larravel如何验证 onkeyup 事件而无需一次又一次地发送 post 请求以在 laravel 中路由
【发布时间】：2018-10-17 06:59:18
【问题描述】：

使用 Ajax 代码验证 Activity 函数

$(document).on('keyup','#activity_name',function () {
            var error_activity = '';
            var activity = $('#activity_name').val();
            var _token = $('input[name="_token"]').val();
            $.ajax({
                type : 'post',
                url : '{{ url('checkactivity') }}',
                data :{activity:activity, _token:_token},
                success:function (result) {
                    if(result == 'unique'){
                        $('#activity_status').html('<lable class="text-sucess" style="color: blue"></lable>');
                        $('#activity').removeClass('has-error');
                        $('#activity_btn').attr('disabled',false);
                    }
                    else
                    {
                        $('#activity_status').html('<lable class="text-danger">Try Another!</lable>');
                        $('#activity').addClass('has-error');
                        $('#activity_btn').attr('disabled','disabled');
                    }
                }
            });
        });

当我在我的输入字段中输入一个单词并且在每个单词上他发送一个帖子请求时，我的输入字段和这里他总是调用一个事件 Onkeyup。

<div class="form-group">
                <label for="checkbox">Group</label>
                <select class="form-control form-control-sm"  id="activitygroup" name="activitydeleverable">
                    <option>Select</option>
                    @foreach(App\Groups::all() as $group_name)
                        <option value="{{ $group_name->id }}">{{ $group_name->name }}</option>
                    @endforeach
                </select>      
            </div>
            <button type="submit" id="activity_btn" onclick="insertactivity()" class="btn btn-info">Insert</button>

这是我的控制器功能

function checkactivity(Request $request){
    $data = Activities::whereName($request->activity)->first();
    if (!is_null($data)){
        echo 'not_unique';
    }
    else
    {
        echo 'unique';
    }
}

我的代码运行良好，但我遇到了问题。在每个单词上，我的 onkeyup 事件 Ajax 都会向 db 发送一个 post 请求，并检查数据在 db 中是否可用。但我必须停止这样做一次又一次的发布请求。它可能会减慢我的系统，所以我必须解决这个问题，请解决这个逻辑问题，我必须停止这个 Post 请求或只需要一个 post 请求。 You can see no of request in image

【问题讨论】：

标签： ajax validation laravel-5 request onkeyup

【解决方案1】：

您将在这个已解决的问题中找到有关所需解决方案的所有信息：

How to delay the .keyup() handler until the user stops typing?

【讨论】：

【解决方案2】：

进行 ajax 请求的正确方法是一次只使用一次。

var req = null;
$(document).on('keyup','#activity_name',function () {
            var error_activity = ''; 
            var activity = $('#activity_name').val();
            var _token = $('input[name="_token"]').val();
            if (req != null) req.abort();
            req = $.ajax({
                type : 'post',
                url : '{{ url('checkactivity') }}',
                data :{activity:activity, _token:_token},
                success:function (result) {
                    if(result == 'unique'){
                        $('#activity_status').html('<lable class="text-sucess" style="color: blue"></lable>');
                        $('#activity').removeClass('has-error');
                        $('#activity_btn').attr('disabled',false);
                    }
                    else
                    {
                        $('#activity_status').html('<lable class="text-danger">Try Another!</lable>');
                        $('#activity').addClass('has-error');
                        $('#activity_btn').attr('disabled','disabled');
                    }
                }
            });
        });

【讨论】：