How to send data using 2 buttons without refreshing HTML page

Navigation
0

I have a problem, I am lighting an LED with a Wifi Chip (Esp8266), everything is fine with my 2 buttons one that turns on and the other that turns off my light bulb, the problem I have is that when I press the buttons I reload the page, I need you to send me something like this through the url:

/ LED = ON - > to light the bulb | | / LED = OFF - > to turn it off

but without reloading the page, I have read and used jquery or ajax but I do not know how to implement it in my code, I will leave a part of the code I am using to send the data, I am using bootstrap as a framework. 

<!DOCTYPE HTML>
<html>
<head>
<title> Control de luces </title>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<header> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navegacion-fm"> <span class="sr-only">Desplegar / Ocultar Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand"><b>Controles</b></a> </div> <!-- Inicia Menu --> <div class="collapse navbar-collapse" id="navegacion-fm"> <ul class="nav navbar-nav"> <li class="active"><a href="">Inicio</a></li> </ul> <!-- <ul class="nav navbar-nav"> <li><a href="#"></a></li> </ul> --> </div> </div> </nav> </header>

<div class="container">
<div class="row">
<div class="col-xs-12"> 

<button type="button" class="btn btn-success btn-lg btn-block" value="Input Button" onclick="location.href = '/LED=ON';"> Encender</button>

<button type="button" class="btn btn-danger btn-lg btn-block" value="Input Button" onclick="location.href = '/LED=OFF';"> Apagar</button>
</div>
</div> </div>

</body>
</html>
    
asked by Staz 06.10.2018 в 17:20
source

2 answers

1

The problem is that, from what I see in the code, you have to navigate a page to be able to warn that you have to turn on or turn off the light, that's why the page is reloaded.

Maybe what you can do is navigate it in a hidden iframe, so that the page runs but does not refresh. It would be something like this: 

<iframe name="aaa" style="position:absolute;top:-10px;width:1px;height:1px"></iframe>
<button onclick="window.open('/LED=ON', 'aaa');">Encender</button>

I hope it serves you.

Good luck!

    
answered by 06.10.2018 в 17:36
0

There is a technology called AJAX which allows you to perform asynchronous processes. You can take a look around this link so you can read a little more about AJAX

link

    
answered by 06.10.2018 в 17:45
I do not receive the data sent from javascript (fetch) to php Add a new column to a table with data in Laravel