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

166

Ich habe eine HTML-Seite mit einer Schaltfläche darauf. 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 Hinweis / Vorsprung geben? Sehr geschätzt.

— Shaik Syed Ali
quelle

Ihr Anruf beim REST-Service ist nur eine Anfrage an den Server. Ich denke, es wird eine Ajax-Anfrage. Verwenden Sie jQuery zum Beispiel api.jquery.com/jquery.ajax

— ikos23

170

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 wurde. Es vereinfacht die XMLHttpRequest-Syntax, die Sie in vielen anderen Beispielen sehen.

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

Eine URL oder ein Objekt, das die Anforderung darstellt.
Optionales Init-Objekt, das die Methode, die Header, den Body usw. enthält.

Einfach 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
}

Wiederherstellen der vorherigen Top-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
}

— Brendan McGill
quelle

2

Wie sieht die Tastenaktion mit dieser Lösung aus?

— Asmaier

3

Was ist mit DELETE und PUT?

— Krzysztof

2

@asmaier hast du eine Antwort bekommen, wie die Button-Aktion aussehen wird? Danke

— Angel Esguerra

1

button.addEventListener('click', userAction);oder<button onclick="userAction()" />

— Brendan McGill

105

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 über den folgenden Link (aktualisiert am 11.01.2017).

— Abhishek
quelle

19

Die synchrone XMLHttpRequest im Hauptthread ist aufgrund ihrer nachteiligen Auswirkungen auf die Benutzererfahrung veraltet. Für weitere Hilfe xhr.spec.whatwg.org

— jeet.chanchawat

Da Sie einen synchronisierten Aufruf xhttp.open("POST", "Your Rest URL Here", false);ausführen , müssen Sie aufrufen , andernfalls enthält xhttp.responseText das Ergebnis nicht. Aber wie gesagt, es wird bald veraltet sein.

— Alexandre Fenyo

Wenn dies eine POST-Anfrage ist, wo veröffentlichen Sie die Daten tatsächlich?

— EFC

" xhttp.setRequestHeader("Content-type", "application/json");" - Das ist eine Lüge. Sie übergeben kein JSON an die send()Methode.

— Quentin

Sie haben diesen Code so bearbeitet, dass die Anforderung nicht mehr synchron ist, aber Sie versuchen, die Antwort so zu lesen, als ob sie es wäre.

— Quentin

17

Hier ist ein weiterer Javascript-REST-API-Aufruf mit Authentifizierung mithilfe 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>

— user1713008
quelle

Haben Sie keine domänenübergreifenden Probleme gehabt? Ich rufe eine API an, die von localhost an einem anderen Ort gehostet wird, und es gibt domänenübergreifende Probleme.

— Harit Vishwakarma

Ich stehe auch vor dem gleichen Cors-

— Problem.

@ HaritVishwakarma - Wenn die von Ihnen aufgerufene API nicht über Access-Control-Allow-Origin für Ihre Domain (localhost) verfügt. Versuchen Sie, einen eigenen Proxy zu erstellen, senden Sie eine Anfrage an den Proxy und leiten Sie die Anfrage an Ihr Ziel weiter. Da dies eine Server-zu-Server-Kommunikation ist, wird die Anforderung nicht blockiert (CORS wird von Browsern blockiert). Senden Sie diese Antwort mit dem Header "allow-origin" auf "all" zurück

— sss999

@ HaritVishwakarma und NitinWahale sowie zukünftige Entwickler können die Websicherheit in Ihrem lokalen Browser nur zu Testzwecken deaktivieren - dies funktioniert nicht als Produktionslösung. Siehe

— KDT

12

    $("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);
        }
      });
});

— Aayushi
quelle

7

Ich denke hinzufügen, wenn (this.readyState == 4 && this.status == 200) zu warten besser ist:

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();

— martinwang1985
quelle

Das funktioniert nicht, wenn sich der Client und die API nicht in derselben Domäne befinden, oder?

— David Brossard

0

Bevor wir versuchen, etwas in das Front-End der Website einzufügen, öffnen wir eine Verbindung zur API. Dazu verwenden wir XMLHttpRequest-Objekte. Auf diese Weise können Dateien geöffnet und eine HTTP-Anforderung gestellt werden.

Wir erstellen eine Anforderungsvariable und weisen ihr ein neues XMLHttpRequest-Objekt zu. Anschließend öffnen wir eine neue Verbindung mit der Methode open (). In den Argumenten geben wir den Anforderungstyp als GET sowie die URL des API-Endpunkts an. Die Anfrage ist abgeschlossen und wir können auf die Daten innerhalb der Onload-Funktion zugreifen. Wenn wir fertig sind, senden wir die Anfrage.
// Eine Anforderungsvariable erstellen und ihr ein neues XMLHttpRequest-Objekt zuweisen. 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()

— Roshini Dasari
quelle

1

Ähnliche Antworten wurden bereits gegeben. Warum hast du deine Antwort hinzugefügt? Eine kurze Beschreibung könnte helfen

— slfan

-1

Üblicher Weg ist mit PHP und Ajax zu gehen. Aber für Ihre Anforderung wird unten 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>