Utilisation de Sinatra et ruby pour interfacer des boutons HTML

Question

Divulgation : Je ne connais rien à la programmation web

Contexte du problème : Je dispose d'une chambre d'essai environnementale qui teste les ordinateurs intégrés à différentes températures. Elle est contrôlée par une application Windows. Je peux contrôler la chambre via Ruby et l'interface Win32API de l'application de contrôle. La chambre est loin de mon bureau et je voudrais surveiller à distance l'état et déclencher un changement via une interface Web. Sinatra facilite l'affichage de l'état via un serveur web.

Mon problème : Je veux cliquer sur un bouton de la page web d'état et envoyer une commande via Sinatra et Ruby à l'application sans passer à une autre page. Je ne trouve pas d'exemples ou d'informations pour quelque chose comme ça.

La réponse : Vous pouvez utiliser Ajax (comme dans la réponse acceptée) mais j'opte pour poster et recharger la page. C'est beaucoup plus simple mais pas aussi fluide.

Answer 1

Je veux [ ] envoyer une commande via (le serveur) [ ] sans passer à une autre page.

C'est ce que l'on appelle Ajax et est généralement mis en œuvre à l'aide de XMLHttpRequest .

Answer 2

Avez-vous déjà un formulaire qui POST à un gestionnaire sinatra et qui fait ce que vous voulez ?

Si c'est le cas, vous pouvez facilement le rendre ajaxy en utilisant jQuery.

1. Ajoutez jquery.js à votre répertoire public et demandez-le à partir de la présentation.

2. Ajoutez un peu de js à envoyer à votre handler lorsque votre bouton est cliqué.

   // assuming your form has id=myform
   // defines a callback on submission of the form #myform.
   $("#myform").submit(function() {
     //posts the contents of the form to /action using ajax
     $.post("/action", $("#myform").serialize(), function(result){
       // assuming result is a string of the updated data in html
       // and assuming that your data goes in an element with the id data-table
       $("#data-table").html(result)
     });
     return false; // prevents the form from submitting normally
   });

jquery docs for

• soumettre
• poste
• sérialiser
• html