Jump to content

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


Recommended Posts

Здравствуйте товарищи, приношу извинения за некомпетентность в познании 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 by itsterit
Link to post
Share on other sites
  • klierik changed the title to Как реализовать GET-запрос?
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, не очень хочется.

спасибо😍

Link to post
Share on other sites

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

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

Link to post
Share on other sites
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 by itsterit
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,118
    Total Members
    1,451
    Most Online
    seonka.
    Newest Member
    seonka.
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...