Question

有什么办法可以在用户填写所有必填字段时调用ajax请求吗？我有三个字段用于事件标题，列表和职称。一旦填写了所有这些字段，我想激发ajax请求以获取我想要的数据，但我不知道如何添加事件监听器来检查所有这些字段是否都有值？显然，用户可能会更改输入，因此我需要检查是否所有字段都在运行搜索之前一直填充。

这是搜索数据的方式：

$('#event').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url : 'search.php',
                    dataType: "json",
                    data: {
                        event_title: request.term,
                        type: 'event'
                    },
                    success: function(events) {
                        response($.map(events, function (event) {
                            return {
                                label: event.date + "| " + event.title + "[" + event.short_name + "]",
                                value: event.title,
                                id: event.id
                            }
                        }));
                    }
                });
            },
            autoFocus: true,
            minLength: 1
        });

        $("#event").on("autocompleteselect", function (event, ui) {
            $("#event_id").val(ui.item.id);
        });

        $("#list").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "search.php",
                    dataType: "json",
                    data: {
                        list_name: request.term,
                        type: 'list'
                    },
                    success: function (lists) {
                        response(lists);
                        response($.map(lists, function (list) {
                            return {
                                label: list.l_name,
                                value: list.l_name,
                                id: list.id
                            }
                        }));
                    }
                });
            }
        });

        $("#list").on("autocompleteselect", function (event, ui) {
            $("#list_id").val(ui.item.id);
        });

然后我想使用这些字段中的数据执行ajax请求 - 但是用户显然可能会更改这些字段并且它们将从空白开始。

Answer 1

根据评论我建议你尝试类似的东西...... 这是为了演示这个想法，你可能想要对输入函数实现延迟，因此它不会调用输入第三个输入的每个字符。另外FYI xhr.abort（）方法告诉它停止监听先前的调用返回，如果调用后续调用。祝你好运

<input id="first" class="linked-input"/>
<br/><br/>
<input id="second" class="linked-input"/>
<br /><br/>
<input id="third" class="linked-input"/>


$('.linked-input').on('input', function () {
    var firstVal = $("#first").val();
    var secondVal = $("#second").val();
    var thirdVal = $("#third").val();

    if (firstVal != "" && secondVal != "" && thirdVal != "") {
        AjaxValidate.call(firstVal, secondVal, thirdVal);
    }
});

var AjaxValidate = {
    call: function (firstVal, secondVal, thirdVal) {
        if (typeof this.xhr !== 'undefined') {
            this.xhr.abort();
        }

        this.xhr = $.ajax({
          url: 'search.php',
          dataType: "json",
          data: {
            first: firstVal,
            second: secondVal,
            third: thirdVal,
            type: 'event'
          },
          success: function (events) {
            response($.map(events, function (event) {
                return {
                  label: event.date + "| " + event.title + "[" + event.short_name + "]",
                  value: event.title,
                  id: event.id
                }
              }));
            }
        });
    }
};

仅当用户填写了所有必填字段时才运行ajax请求

1 个答案: