在浏览器

Question

我使用Django创建了我的网站，并为Ajax请求选择了JQuery。

我想要一个HTML元素来指示我的ajax-request的状态，并希望向它展示3件事：

1. 当输入字段被更改并且请求未被发送时（例如，转动按钮红色）
2. 当浏览器启动ajax请求时（例如变黄）
3. 当浏览器收到请求并在浏览器中进行更改时

我为此选择了一个按钮元素。 我想改变一个change-function中的颜色来读取然后发送AJAX请求。 在$ .ajax函数之后我想把它改成黄色。 在我的解雇成功函数结束时，我将其更改为绿色。

我有输入类型的时间，在Chrome中，它使用向上/向下箭头渲染。当点击几次以改变几个步骤的时间时，浏览器中有一种去抖功能。但我认为通过一次输入更改它也会出现问题。 AJAX-Request按预期工作，但按钮永远不会变为红色或黄色。

ajax.js
-------
$("input.fire, select.fire").change(function() {
    var time = $("#element1").val();

    $.when(function() {
    $("#status-button").css('backgroundColor', 'red')

    $.ajax({
      url: '../../../ajax-send/',
      type: 'POST',
      data: {
        'time': time
      },
      dataType: 'json',
      success: successResponse
    })
    $("#status-button").css('backgroundColor', 'yellow');
}

function successResponse(data) {
    $("#answer-div").html(data['answer']);
    $("#status-button").css('backgroundColor', 'green')
}