Как реализовать GET-запрос?

itsterit · November 4, 2020

Здравствуйте товарищи, приношу извинения за некомпетентность в познании HTML, но надо же с чего-то начинать)

значит, не мог бы кто переделать код таким образом, чтобы при нажатии на кнопку отправлялся на сервер, скажем, файл-некая цифра, ТЕМ ЖЕ ОБРАЗОМ КАК И ПРИ РАБОТЕ СО СЛАЙДЕРОМ. т.е нажимаем на кнопку и на сервер происходит отправка методом GET.

<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP Web Server</title>
    
  <style>
    .light {
        text-shadow: #ffffff 0 0 10px; /* Свечение голубого цвета */
        color: #ffffff  ;
          }
    a{
        margin-left: 100px;
        margin-right: 100px;
        width: 100px; 
        height: 100px;
        border-radius: 5px;
        background: #ffffff;
      }
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {
        max-width: 400px; margin:0px auto; padding-bottom: 25px;
        width: 100%; /* Ширина таблицы в процентах */
        background: linear-gradient(-45deg, #ff4500, #4200ff) fixed;
        color: #ffffff;
        font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      } 
    .slider {
        -webkit-appearance: none; margin: 14px; width: 360px; height: 10px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;border-radius: 10px;
      }
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #ff4500; cursor: pointer;border-radius: 35px;
      }
    .slider::-moz-range-thumb { 
        width: 35px; height: 35px; background: #003249; cursor: pointer; 
        border-radius: 35px;  background: #7600ff; width: 20px; height: 20px;
      } 
  </style>
    
</head>
<body>
  <h2 class="light">ESP Web Server</h2>
    <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
    <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023"  value="%SLIDERVALUE%" step="1" class="slider"></p> 
      
  <a id="switch" href="#">clic</a>
    
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();    
}    
</script>
    
<script>
//дожидаемся полной загрузки страницы
window.onload = function () {

    //получаем идентификатор элемента
    var a = document.getElementById('switch');
    
    //вешаем на него событие
    a.onclick = function() {
        //производим какие-то действия
        if (this.innerHTML=='On') this.innerHTML = 'Off';
        else this.innerHTML = 'On';
        xhr.open("GET", 78, true);
        xhr.send();
        //предотвращаем переход по ссылке href
        return false;
    }
}
</script>
</body>
</html

зы. Я делать это уже просто устал.

зы2. мне этот код нужен, дабы сервер из ESPшки принял GET и выполнил условие(выключил светодиод).

Edited November 5, 2020 by itsterit

klierik · November 4, 2020

Здравствуйте.

Вы можете использовать $.get() из jQuery

itsterit · November 5, 2020

22 часа назад, klierik сказал:

Здравствуйте.

Вы можете использовать $.get() из jQuery

Я извиняюсь, но это ничего не говорит мне🙈.

Цитата

<script>
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
</script>

Т.е есть код, и он каким то магическим образом отправляет на сервер значение слайдера, которое я отслеживаю с сервера. Вот, возможно ли этим же методом отправить ,скажем, иное число при нажатии на кнопку?

А грузить сервер ещё чем то лишним, в роли которого выступает esp8266, не очень хочется.

спасибо😍

klierik · November 6, 2020

Если Вам требуется отправить на сервер запрос с данными, получить в ответ данные для обработки, тогда для решения этой задачи подойдёт jQuery $.ajax

Если Вы хотите использовать чистый JS, тогда изучите API в серии статей, начиная от сюда — Интерфейсы веб API > XMLHttpRequest

itsterit · November 7, 2020

06.11.2020 в 09:23, klierik сказал:

Если Вам требуется отправить на сервер запрос с данными, получить в ответ данные для обработки, тогда для решения этой задачи подойдёт jQuery $.ajax

Если Вы хотите использовать чистый JS, тогда изучите API в серии статей, начиная от сюда — Интерфейсы веб API > XMLHttpRequest

спасибо разобрался.

Цитата

<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP Web Server</title>

<style>
html {font-family: Arial; display: inline-block; text-align: center;}
body {
max-width: 400px; margin:0px auto; padding-bottom: 25px;
width: 100%; /* Ширина таблицы в процентах */
background: linear-gradient(-45deg, #4200ff, #ff4500) fixed;
/*color: #ffffff;*/
font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
button {
font-weight: 500;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 1px;
background: #00ff7b;
transition: 0.3s;
border-radius: 35px;
}






</style>

</head>
<body>
<button id="button1" type="button" onClick="onClick()">off</button>
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="onClic()">Click me</button>
<p>Clicks: <a id="click">0</a></p>
<script>
var clicks = 1;
var Elem = document.getElementById('button1');
function onClick() {

clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
if(clicks % 2 == 0)
{
document.getElementById("button1").innerHTML = "on";
Elem.style.background = "#ff7600";
console.log("1024");
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+0, true);
xhr.send();


}
else
{
document.getElementById("button1").innerHTML = "off";
Elem.style.background = "#0aff00";
console.log("0");
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+1024, true);
xhr.send();
}

};

</script>
<script>
var click = 0;
function onClic() {
click += 1;
document.getElementById("click").innerHTML = click;
};

</script>
</body>
</html

скажите ,пожалуйста, как в данном (уже рабочем) коде избавиться от вывода кликов <p> </p>

Цитата

<p>Clicks: <a id="clicks">0</a></p>

если просто его оттуда "вырезать", то код просто отказывается работать

Edited November 7, 2020 by itsterit

Sign In

Как реализовать GET-запрос?

Question

itsterit

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

itsterit

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

itsterit

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information