Webseite mit der sich über Buttons Urls senden lassen.Bitte helft mir

Tobi82

Grünschnabel
Hallo,

ich steht seit Tagen auf dem Schlauch da mir einfach die Grundkenntnisse fehlen. Ich möchte eine Simple Webseite erstellen die z.b. 14 Buttons hat. Mit jedem Button soll ein Befehl mittels URL an einen Arduino Yun gesendet werden.

URL lautet: /data/put/key/val

Nun möchte ich die val mit jedem Button verändern. Ganz simpel von 1-14. Wie kann ich das mittels Ajax am besten lösten?

Stelle mir eine Schleife vor die von jedem Button die val von 1-14 bekommt und daraus die URL bastelt, die dann am Ende jeweils die Zahlen von 1-14 hat.

Kann mir jemand vielleicht helfen=
 
Du schreibst ja was von Ajax.
Erstmal muss man wissen bu was an der Url senden willst ( Ajax ok ), oder ob du die url anklicken willst ,als wenn man sie öffnen muss.
Wenn man auf der url gelangen muß brauch man hier kein Ajax.
Falls doch muss man wissen was man da hinsenden möchte, bzw ob die url nur einmal aufgerufen werden muss.

Wie auch immer.
Im html würde ich ein Container setzen
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Dann weil du Schleife sagtest die Buttons mit Javascript erstellen
Javascript:
dazu=document.getElementById('box');
for(h=1;h<=14;h++){
  butt=document.createElement('input');
  butt.id="a"+h;
  butt.type='button';
  butt.className='buttons';
  butt.value="Button "+h;
  butt.setAttribute('data-zahl',h);
  butt.style.margin='20px';
  dazu.appendChild(butt);
}

Du kannst aber auch alle 14 Buttons in html selber rein schreiben dann brauch man das Javascript nicht.
Dann kommt deine Ajax sache
Die Buttons ein click event geben und data-zahl auslesen und dann die url zusammen bauen und an Ajax geben
Javascript:
$('input').click(function(){
  let zahl=$(this).data('zahl');
  let link='/data/put/key/'+zahl;
         $.ajax({
         type: 'POST',
             url: link,
             data: {zahl:zahl,link:link},
             success: function(data){
                 // antwort abfabgen
             }
        });
})

wie gesagt bei den Ajax müsste man genau wissen was gesendet werden soll und so weiter
 
Empfehlung von mir: Man kann den Eventlistener auch direkt an dem erzeugten Button registrieren:
Code:
for(let h=1;h<=14;h++){
  butt=document.createElement('input');
  butt.id="a"+h;
  butt.type='button';
  butt.className='buttons';
  butt.value="Button "+h;
  butt.setAttribute('data-zahl',h);
  butt.style.margin='20px';
  butt.addEventListener("click", function() {
      // ...
  });
  dazu.appendChild(butt);
}
Wenn man die Schleifenvariable mit let anlegt, kann man sie auch im Listener verwenden.
IMO wird es dadurch etwa kompakter.
 
Zurück