web-dev-qa-db-fra.com

Comment appeler une API de service Web REST à partir de JavaScript?

J'ai une page HTML avec un bouton. Lorsque je clique sur ce bouton, je dois appeler une API de service Web REST. J'ai essayé de chercher en ligne partout. Aucun indice que ce soit. Est-ce que quelqu'un peut me donner une avance/un bon départ? Très apprécié.

javascripthtmlrestweb-services
110
Shaik Syed Ali

Je suis surpris que personne n'ait mentionné la nouvelle API Fetch, supportée par tous les navigateurs sauf IE11 au moment de la rédaction. Cela simplifie la syntaxe XMLHttpRequest que vous voyez dans beaucoup d'autres exemples.

L'API inclut beaucoup plus , mais commence par la méthode fetch(). Il faut deux arguments:

  1. Une URL ou un objet représentant la demande.
  2. Objet init facultatif contenant la méthode, les en-têtes, le corps, etc.

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

Recréant le précédent réponse du haut , un 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

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

Votre action de bouton ::

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

Pour plus d'informations, suivez la procédure suivante lien (Mise à jour le 11/01/2017)

100
Abhishek

Voici un autre appel JavaScript REST API avec authentification utilisant 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

Je pense que ajouter si (this.readyState == 4 && this.status == 200) attendre, c'est mieux:

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

Avant d’essayer de placer quoi que ce soit au début du site Web, ouvrons une connexion à l’API. Pour ce faire, nous utiliserons des objets XMLHttpRequest, qui permettent d'ouvrir des fichiers et d'effectuer une requête HTTP.

Nous allons créer une variable de requête et lui affecter un nouvel objet XMLHttpRequest. Ensuite, nous ouvrirons une nouvelle connexion avec la méthode open (). Dans les arguments, nous spécifierons le type de requête en tant que GET, ainsi que l'URL du point de terminaison de l'API. La demande se termine et nous pouvons accéder aux données à l'intérieur de la fonction onload. Lorsque nous aurons terminé, nous enverrons la demande.
// Créez une variable de requête et affectez-lui un nouvel objet XMLHttpRequest. 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

La méthode habituelle consiste à utiliser PHP et ajax. Mais pour votre exigence, ci-dessous va bien fonctionner.

<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