gcogco10 Ответов: 1

Как изменить статус ajax - запроса для чтения значений из вашего метода GET в jquery

Я хочу улучшить свой код, изменив статус или текущее значение, если оно было изменено с 0 на 1. Например, у меня есть две кнопки, если первая нажата, статус должен изменить свое значение и показать сообщение, подобное включению и выключению лампы. Я хочу сделать что-то похожее на мой запрос вызова ajax, так как у меня есть два вызова функции, и оба они используют метод GET. Есть ли какой-нибудь гуру, который может показать мне прогулку вокруг примеров в Jquery при использовании метода GET?

Что я уже пробовал:

<div class="col-md-2 text-center"> 
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Subscribe</button> <br>
 </div>
  <!------
  ---->
  <br/>
<div class = "col-md-2 text-center">
  <button id = "singlebtn" name="singlebtn" class="btn btn-primary">Unsubscribe</button> <br>
</div>
</body>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=0',
      type:'GET',
      data:{
        format:'text'
      },
      success:function(response){
        alert(response);
      },
      error:function() {
        $('#error').text("There was an error processing your request.Please try again");
        $('#singlebutton').append(data);
      }
      
    });
    
    // second button for unsubscribe.
    $(document).ready(function(){
       $.ajax({
      url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=1',
      type:'GET',
      data:{
        format:'text'
      },
      success:function(response){
        alert(response);
      },
      error:function(){
       $('#error').text("There was an error processing your request.Please try again");
        $('#singlebtn').append(data); 
      }
    
    });
    });
    });

</script>

1 Ответов

Рейтинг:
9

MadMyche

Ваш javascript запускает оба вызова AJAX при загрузке страницы, так как именно это и происходит $(document).ready(function() делает. Нет ничего, что связывало бы любую из этих подпрограмм AJAX с самими кнопками

$(document).ready(function(){
	$.ajax({
		url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=0',
		-- skipped for brevity
	}
});

// second button for unsubscribe.
$(document).ready(function(){
	$.ajax({
		url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=1',
		-- skipped for brevity
	}
});
Решения
Поскольку это довольно простые процедуры; то, что я хотел бы сделать, это переопределить функции с их собственными именами и явно вызвать их из двух элементов кнопки (с разными идентификаторами), используя событие onClick атрибут.
<script type="text/javascript">
function Subscribe() {
  // copy your first ajax here
}
function UnSubscribe() {
  // copy second here
}
</script>
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="Subscribe();">Subscribe</button>
<!-- -->
<button id="singlebtn" name="singlebtn" class="btn btn-primary" onclick="UnSubscribe();">>Unsubscribe</button>

Ссылка:
https://www.w3schools.com/jsref/event_onclick.asp

Примечание:
Название атрибутов идентификатора для 2 кнопок на самом деле не отличается; я действительно думал, что у вас была ошибка HTML, потому что я читал их как одно и то же имя.

gcogco10

Привет, команда, задача, с которой я сейчас сталкиваюсь, - это итерация, поскольку она не останавливается. Вот корректировка кода.




функция подписаться() {
$.Аякс({
url:'https://api.thingspeak.com/update?api_key=D**&field8=0',
тип:'GET',
данные:{
тип:'текст'
},
успех:функция(ответ){
тревога(ответ);
$('#синхробуффонаду').добавить(данные);
}

});
setTimeout("Subscribe()", 100);

}
// вторая кнопка для отмены подписки.
функция отписки() {
$.Аякс({
url:'https://api.thingspeak.com/update?api_key=D***&field8=1',
тип:'GET',
данные:{
тип:'текст'
},
успех:функция(ответ){
тревога(ответ);
$('#singlebtn').append(данные);
}

});
//setTimeout("UnSubscribe()", 100);
}