Функция успеха AJAX не может изменить текст кнопки

Question

У меня простой, но странный вопрос, я не могу изменить значение кнопки в обратном вызове ajax post success, я уверен, что обратный вызов будет выполнен при отображении предупреждения. Кроме того, эти кнопки создаются статически, я не создавал их динамически с помощью Jquery.

Ниже мой Аякс:

$.ajax({
    type: "POST",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    url: "/?handler=Queue",
    data: $.param(params),
    dataType: "json",
    success: function (response) {
        $("#btn-queue-lib").val("Cancel Queue");
        alert(response.responseText);
    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});

Однако, если я изменю проблемную строку вне ajax, она будет работать нормально:

$("#btn-queue-lib").val("Cancel Queue"); // Either Here
$.ajax({
    type: "POST",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    url: "/?handler=Queue",
    data: $.param(params),
    dataType: "json",
    success: function (response) {
        alert(response.responseText);
    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});
$("#btn-queue-lib").val("Cancel Queue"); // Or Here

Answer 1

Я обнаружил проблему, я по какой-то причине не знаю, что сервер возвращает сообщение об успешном завершении, но фактически возвращает неверный запрос.Поэтому я ошибаюсь, что функция успеха должна быть вызвана.Если я поместил проблемную строку в ответ об ошибке, он работает нормально.Спасибо ребята за ваши усилия !!!~ (^ _ ^) ∠ ※

Answer 2

Даже я сталкивался с той же проблемой ... Я справился с этим, как показано ниже, надеюсь, это тоже поможет

function changeAfterAjax(){
$.ajax({
    type: "GET",
    url:"https://reqres.in/api/users?page=2",
    //data: $.param(params),
    dataType: "json",
    success: function (response) {
        $("#btn-queue-lib").text("Cancel Queue");// this is also works fine 
        //changeBtnTxt('btn-queue-lib','Cancel Queue');
        //alert(response);
    },
    error: function (xhr) {
        console.log(xhr);
    }
})
}

function changeBtnTxt(id,txt){
  $("#"+id).text(txt);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="changeAfterAjax()" id="btn-queue-lib">Click to chanage after ajax</button>

Answer 3

изменение

$("#btn-queue-lib").val("Cancel Queue");

до

$("#btn-queue-lib").text("Cancel Queue");

и поместите оператор в функцию успеха ajax прямо перед предупреждением.

Answer 4

При успехе используйте

 $("#btn-queue-lib").html("Cancel Queue");

Answer 5

document.getElementById ('btn-queue-lib'). InnerText = 'Cancel Queue'