it-swarm.com.de

Wie rufe ich eine REST Webdienst-API aus JavaScript auf?

Ich habe eine HTML-Seite mit einer Schaltfläche. Wenn ich auf diese Schaltfläche klicke, muss ich eine REST Webdienst-API aufrufen. Ich habe versucht, überall online zu suchen. Keine Ahnung. Kann mir jemand einen Vorsprung geben? Sehr geschätzt.

110
Shaik Syed Ali

Ich bin überrascht, dass niemand die neue Fetch-API erwähnt hat, die zum Zeitpunkt des Schreibens von allen Browsern außer IE11 unterstützt wird. Dies vereinfacht die XMLHttpRequest-Syntax, die Sie in vielen anderen Beispielen sehen.

Die API enthält viel mehr , aber beginnen Sie mit der Methode fetch(). Es braucht zwei Argumente:

  1. Eine URL oder ein Objekt, das die Anforderung darstellt.
  2. Optionales init-Objekt mit Methode, Headern, Body etc.

Einfaches GET:

const userAction = async () => {
  const response = await fetch('http://example.com/movies.json');
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}

Neuerstellung des vorherigen beste Antwort , ein POST:

const userAction = async () => {
  const response = await fetch('http://example.com/movies.json', {
    method: 'POST',
    body: myBody, // string or object
    headers: {
      'Content-Type': 'application/json'
    }
  });
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}
83
Brendan McGill

Ihr Javascript:

function UserAction() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             alert(this.responseText);
         }
    };
    xhttp.open("POST", "Your Rest URL Here", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send("Your JSON Data Here");
}

Ihre Button Aktion ::

<button type="submit" onclick="UserAction()">Search</button>

Weitere Informationen erhalten Sie unter link (Updated 2017/01/11)

100
Abhishek

Hier ist ein weiterer Javascript REST API-Aufruf mit Authentifizierung unter Verwendung von json:

<script type="text/javascript" language="javascript">

function send()
{
    var urlvariable;

    urlvariable = "text";

    var ItemJSON;

    ItemJSON = '[  {    "Id": 1,    "ProductID": "1",    "Quantity": 1,  },  {    "Id": 1,    "ProductID": "2",    "Quantity": 2,  }]';

    URL = "https://testrestapi.com/additems?var=" + urlvariable;  //Your URL

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
    xmlhttp.open("POST", URL, false);
    xmlhttp.setRequestHeader("Content-Type", "application/json");
    xmlhttp.setRequestHeader('Authorization', 'Basic ' + window.btoa('apiusername:apiuserpassword')); //in prod, you should encrypt user name and password and provide encrypted keys here instead 
    xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
    xmlhttp.send(ItemJSON);
    alert(xmlhttp.responseText);
    document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>";
}

function callbackFunction(xmlhttp) 
{
    //alert(xmlhttp.responseXML);
}
</script>


<html>
<body id='bod'><button type="submit" onclick="javascript:send()">call</button>
<div id='div'>

</div></body>
</html>
17
user1713008
    $("button").on("click",function(){
      //console.log("hii");
      $.ajax({
        headers:{  
           "key":"your key",
     "Accept":"application/json",//depends on your api
      "Content-type":"application/x-www-form-urlencoded"//depends on your api
        },   url:"url you need",
        success:function(response){
          var r=JSON.parse(response);
          $("#main").html(r.base);
        }
      });
});
11
aayushi

Ich denke add if (this.readyState == 4 && this.status == 200) zu warten ist besser:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "your url", true);

xhttp.send();
6
martinwang1985

Bevor wir versuchen, etwas auf das Frontend der Website zu stellen, öffnen wir eine Verbindung zur API. Wir verwenden dazu XMLHttpRequest-Objekte. Dies ist eine Möglichkeit, Dateien zu öffnen und eine HTTP-Anfrage zu stellen.

Wir erstellen eine Anforderungsvariable und weisen ihr ein neues XMLHttpRequest-Objekt zu. Dann öffnen wir eine neue Verbindung mit der Methode open () - in den Argumenten geben wir den Anfragetyp als GET sowie die URL des API-Endpunkts an. Die Anfrage wird abgeschlossen und wir können auf die Daten innerhalb der Onload-Funktion zugreifen. Wenn wir fertig sind, senden wir die Anfrage.
// Erstellen Sie eine Anforderungsvariable und weisen Sie ihr ein neues XMLHttpRequest-Objekt zu. var request = new XMLHttpRequest ()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)

request.onload = function () {
  // Begin accessing JSON data here
  }
}

// Send request
request.send()
0
Roshini Dasari

Der übliche Weg ist, mit PHP und ajax zu gehen. Aber für ihre anforderung, unten wird gut funktionieren.

<body>

https://www.google.com/controller/Add/2/2<br>
https://www.google.com/controller/Sub/5/2<br>
https://www.google.com/controller/Multi/3/2<br><br>

<input type="text" id="url" placeholder="RESTful URL" />
<input type="button" id="sub" value="Answer" />
<p>
<div id="display"></div>
</body>

<script type="text/javascript">

document.getElementById('sub').onclick = function(){

var url = document.getElementById('url').value;
var controller = null; 
var method = null; 
var parm = []; 

//validating URLs
function URLValidation(url){
if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
var x = url.split('/');
controller = x[3];
method = x[4]; 
parm[0] = x[5]; 
parm[1] = x[6];
 }
}

//Calculations
function Add(a,b){
return Number(a)+ Number(b);
}
function Sub(a,b){
return Number(a)/Number(b);
}
function Multi(a,b){
return Number(a)*Number(b);
}  

//JSON Response
function ResponseRequest(status,res){
var res = {status: status, response: res};
document.getElementById('display').innerHTML = JSON.stringify(res);
}


//Process
function ProcessRequest(){

if(method=="Add"){
    ResponseRequest("200",Add(parm[0],parm[1]));
}else if(method=="Sub"){
    ResponseRequest("200",Sub(parm[0],parm[1]));
}else if(method=="Multi"){
   ResponseRequest("200",Multi(parm[0],parm[1]));
}else {
    ResponseRequest("404","Not Found");
 }

}

URLValidation(url);
ProcessRequest();

};
</script>
0
user10567815