Question

jQuery / AJAX显示所有加载器，同时在下面输入任何字段是我的示例代码，在底部有一个示例图像，就像当前正在发生的事情。

我的问题是，当我输入工作头衔然后显示所有装载者如城市时，另一方面显示城市输入相同。

问题是如何在我为此输入时仅显示此装载器，就像我输入作业标题然后想要显示装载工作标题输入字段，也不显示城市，与城市相同。

如果我也没有解释的话，请告诉我。

<form action="/search" accept-charset="UTF-8" method="get">
    <div class="row">
        <div class="col-md-6"> 
            <div class="job-search-field">

                <input type="text" name="key" id="key" placeholder="Keyword or Label like: Top,Mid,Entry" class="form-control" autocomplete="off">
                <i class="icofont icofont-user-search"></i>
                <div class="loader" style="display: none;"></div>
            </div>
        </div>

        <div class="col-md-6 p-l"> 
            <div class="city-field">
                <input type="text" name="city" id="city" placeholder="City" class="form-control" autocomplete="off">
                <i class="icofont icofont-location-pin"></i>
                <div class="loaderCity" style="display: none;"></div>

                <button type="submit" class="btn btn-default">Search</button>
            </div>
        </div>
    </div>
</form>

和JS

$(function(){
    $(document).ajaxStart(function(){
        $(".loader").css("display", "block");
    });

    $(document).ajaxComplete(function(){
        $(".loader").css("display", "none");
    });
});

$(function(){
    $(document).ajaxStart(function(){
        $(".loaderCity").css("display", "block");
    });

    $(document).ajaxComplete(function(){
        $(".loaderCity").css("display", "none");
    });
});

示例图片

Answer 1

让我们分析你的js代码

$(function() {
  $(document).ajaxStart(function() {
    $(".loader").css("display", "block");
  });

  $(document).ajaxComplete(function() {
    $(".loader").css("display", "none");
  });
});

$(function() {
  $(document).ajaxStart(function() {
    $(".loaderCity").css("display", "block");
  });

  $(document).ajaxComplete(function() {
    $(".loaderCity").css("display", "none");
  });
});

$(document).ajaxStart(function()...表示我们将ajaxStart事件绑定到文档。你做了两次。

ajaxStart事件每次都会触发

每当要发送Ajax请求时......

因此，当即将发送任何Ajax请求时会发生以下情况：

两个事件都会触发（因为它们是相同的）并执行此操作：

$(".loader").css("display", "block");
$(".loaderCity").css("display", "block");

ajaxComplete事件恰好相同。

当任何Ajax请求完成时，会发生以下情况：

$(".loader").css("display", "none");
$(".loaderCity").css("display", "none");

我希望你理解（因为这就是你所做的）

现在解决方案是什么？

相反，绑定ajaxStart或ajaxComplete事件以记录最好使用beforeSend和complete回调。

示例

$.ajax({ url: "your_url.com", ... //all other ajax settings and callbacks beforeSend: function( xhr ) { $(".loader").css("display", "block"); }, complete: function( xhr ) { $(".loader").css("display", "none"); } });

修改

由于您使用的是EasyAutocomplete，因此您应该关注this section。

列出了可以使用的事件。

这样做（示例）

var options = { url: "resources/countries.json", getValue: "name", list: { onLoadEvent: function () { (".loader").css("display", "block"); } onShowListEvent: function() { $(".loader").css("display", "none"); } } }; $("#your-id").easyAutocomplete(options);

Answer 2

您正在为文档调用ajaxStart（）函数，这意味着如果在页面或文档中启动任何ajax，则内部代码将执行。根据您的代码

$(function(){
    $(document).ajaxStart(function(){
        $(".loader").css("display", "block");
    });

    $(document).ajaxComplete(function(){
        $(".loader").css("display", "none");
    });
});

$(function(){
    $(document).ajaxStart(function(){
        $(".loaderCity").css("display", "block");
    });

    $(document).ajaxComplete(function(){
        $(".loaderCity").css("display", "none");
    });
});

代码

$(".loaderCity").css("display", "block");
$(".loader").css("display", "block");

将同时执行，因为两者都在文档ajaxStart上调用。

相反，您可以尝试在$ .ajax代码上单独隐藏和显示加载程序。

// Ajax code for jobsearch.
$.ajax({
   url: 'yourURL',
   type: 'post',
   data: {parameter:data},
   beforeSend: function(){
    // Show image container
        $("#loader").show();
   },
   success: function(response){
       //Your Success code
    },
    complete:function(data){
        // Hide image container
        $("#loader").hide();
    }
 });

您可以在ajax调用中包含beforesend和complete函数以获取其他输入。

希望这有帮助。

Answer 3

尝试将$(document).ajaxComplete更改为$(document).ajaxStop

希望这有帮助。

Answer 4

您应该在特定事件中启动您的ajax请求，例如当用户使用debouncer键入字段时（或使用_.debounce(function, wait, [immediate]）。

一些快速代码，请原谅我的错误：

//When typing in the Keyword input field call the search function 
//after the last keyup event.
$("#key").keyUp(function(event) {
   debounce(search(inputElem), 300);
})

//Function that performs the ajax
function search(inputElem) {
  //From the input element, get the `.loader`
  inputElem.parent().find(".loader").show();
  $.ajax({
    url: "/search",
  }).done(function() {
    //Do something with the response
    //Hide the `.loader`
    inputElem.find(".loader").hide();
  });
}

//Debounce function that executes the given function after a certain time
function debounce(fn, bufferInterval) {
  var timeout;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(fn.apply.bind(fn, this, arguments), bufferInterval);
  };

}

jQuery / AJAX在键入任何字段时显示所有加载器

4 个答案: