J'ai une page HTML contenant un bouton. Lorsque je clique sur ce bouton, je dois appeler une API de service Web REST. J'ai essayé de faire des recherches en ligne partout. Aucun indice. Quelqu'un peut-il me donner une piste ou un début de solution ? Merci beaucoup.
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 de cet article. Elle simplifie la syntaxe XMLHttpRequest que vous voyez dans de nombreux autres exemples.
L'API comprend beaucoup plus mais commencez par le fetch() méthode. Elle prend deux arguments :
GET simple :
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éer le précédent meilleure réponse 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
}
@asmaier avez-vous obtenu une réponse sur la façon dont le bouton d'action se présentera ? Merci
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 bouton d'action : :
<button type="submit" onclick="UserAction()">Search</button>Pour plus d'informations, consultez le site suivant lien (Mise à jour 2017/01/11)
La requête synchrone XMLHttpRequest sur le thread principal est dépréciée en raison de ses effets néfastes sur l'expérience de l'utilisateur final. Pour plus d'aide xhr.spec.whatwg.org
Puisque vous effectuez un appel synchronisé, vous devez appeler xhttp.open("POST", "Your Rest URL Here", false); sinon xhttp.responseText ne contiendra pas le résultat. Mais comme dit précédemment, il sera bientôt déprécié.
Voici un autre appel d'API REST en Javascript avec une 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>
Vous n'avez pas rencontré de problèmes d'inter-domaines ? J'appelle une api hébergée ailleurs à partir de localhost et cela pose des problèmes d'inter-domaines.
@HaritVishwakarma - C'est le cas si l'api que vous appelez n'a pas de Access-Control-Allow-Origin pour votre domaine (localhost). Essayez de créer votre propre proxy, envoyez une requête au proxy et faites suivre la requête à votre destination. Comme il s'agit d'une communication de serveur à serveur, la demande ne sera pas bloquée (CORS est bloqué par les navigateurs). Renvoyez cette réponse avec l'en-tête allow-origin réglé sur all.
$("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);
}
});
});
Je pense qu'ajouter if (this.readyState == 4 && this.status == 200) pour attendre 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(); Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
Votre appel au service REST est juste une demande au serveur, je suppose que ce sera une demande ajax. Utilisez jQuery par exemple api.jquery.com/jquery.ajax