Mittwoch, 21. November 2012

Einfacher Webclient für POST und GET Formulare Senden Tests

Webclient für einfache POST und GET Requests

Wer kennt das nicht. Man will eben ein paar Abfragen an das neue Serverprogramm oder an die neue PHP-App senden und muss dabei die Parameter immer wieder anpassen. Mühselig, kann man die URL entsprechend in den Browser tippen, doch dann muss man plötzlich POST senden.

Damit man nicht immer wieder ein neues HTML-Formular oder ein spezielles PHP-Skript oder gar per Console eine Curl Aktion draus macht, wäre ein komfortables Webseiten-Tool doch ganz nett. Am besten gleich mit History, um einen Request nochmal senden zu können.

Voila:

 <html>  
 <head><title>Testclient für Webaufrufe</title>  
 <meta charset="utf-8">  
 <script type="text/javascript">  
 function makeURIParameterForm(text, form) {  
      // entferne alt lasten  
      // gehe über alle elemente  
      // wenn eines dyn gesetzt wurde entfernen, bevor die neuen kommem  
      var elemente = []; // werden entfernt
      for (var a=0;a<form.elements.length;a++){  
           var elem = form.elements[a];  
           if (elem.tag && elem.tag == "dyn"){  
                elemente.push(elem);  
           }  
      } 
      for (var a=0;a<elemente.lenght;a++)
           form.removeChild(elemente[a]);

      // extrahiere die elemente und  
      var teile = text.split("&");  
      for (var a=0;a<teile.length;a++){  
           var t = teile[a].split("=");  
           var elem = document.createElement("input");  
           elem.type = "hidden";  
           elem.value = t[1];  
           elem.name = t[0];  
           elem.tag = "dyn";   
           form.appendChild(elem);  
      }   
 }  
 function senden(form){  
           var object = {};  
           object.post = form.elements[1].checked;  
           object.target = form.elements[2].value.trim();  
           object.url = form.elements[0].value.trim();  
           object.body = form.elements[3].value.trim();  
           object.form = form;    
           liste.push(object);  
           var elem = document.createElement("option");  
           elem.value = liste.length - 1;  
           elem.text = "["+((object.post)?"POST":"GET")+"] "+object.body;  
           document.getElementById("liste").appendChild(elem);  
           fuelleForm(form, object);             
 }  
 function ladeForm(idx){  
      var object = liste[idx];  
      fuelleForm(object.form, object);  
      document.getElementById("info").innerHTML = "Form geladen: idx: "+idx;  
 }  
 function zeigeForm(idx) {  
      var object = liste[idx];  
      var text = "IDX: "+idx+"<br>";  
      for (var key in object)  
           if (key != "form")  
                text += '<b>'+key+"</b>: "+object[key]+"<br>";  
      document.getElementById("info").innerHTML = text;       
 }  
 function fuelleForm(form, object) {  
      form.target = object.target;  
      form.elements[3].value = object.body;  
      var url = object.url;  
      var body = object.body;
      if (url.indexOf("?")>0){
           var pos = url.indexOf("?");
           body = url.substr(pos+1)+"&"+body;
      }
      makeURIParameterForm(body, form);       
      if (object.post){  
           form.elements[1].checked = true;  
           form.method='POST';  
      } else {  
           form.elements[1].checked = false;  
           form.method='GET';  
      }  
      form.action = url;  
      document.getElementById("info").innerHTML = "Gesendet an: "+form.action;  
 }  
 var liste = [];  
 </script>  
 </head>  
 <body>  
 <div style="width:70%;float:left;">  
 Daten senden
 <form onsubmit="senden(this);return true;">  
 url: <input type=text style="width:70%;" hint="http://localhost/index.php"><br>  
 <input type=checkbox> POST<br>  
 target: <input type=text value="ziel"><br>  
 Body (bsp: para1=1213&amp;para2=2233):<br>  
 <textarea style="width:100%;"></textarea><br>  
 <div style="text-align:right;"><input type=submit></div>  
 </form>  
 </div>  
 <div style="width:25%;float:right;">  
 <form onsubmit="ladeForm(this.elements[0].options[this.elements[0].options.selectedIndex].value);return false;">  
      <select size=10 style="width:100%;" id="liste" onclick="zeigeForm(this.options[this.options.selectedIndex].value);">  
      </select><br>  
      <div style="text-align:right;"><input type=submit value="laden"></div>  
 </form>  
 </div>  
 <div style="clear:both;"></div>  
 <hr>  
 <div id="info"></div>  
 <hr>  
 <iframe name="ziel" style="width:100%;heigth:300px;boder:1px solid blue;"></iframe>  
 </body>  
 </html>  

Warum nur 300px für das Iframe? Weil ich den Debugger noch unten eingeblendet habe. Also nur ein Platz Problem. Könnt Ihr euch ja beliebig anpassen.

Viel Spass damit
Saso Nikolov

Keine Kommentare:

Kommentar veröffentlichen