Question

使用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发送一个发布请求，并检查数据是否在db中可用。但我必须停止这样做，一次又一次地发布请求。它可能会使我的系统变慢，所以我必须解决此问题，请解决此逻辑问题，我必须停止此Post请求或仅需要一个Post请求。 You can see no of request in image

Answer 1

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

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

Answer 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');
                    }
                }
            });
        });

如何验证onkeyup事件而无需一次又一次地发送发布请求以路由到Larravel

2 个答案: