Ik heb een HTML-pagina met een knop erop. Als ik op die knop klik, moet ik een REST Web Service API aanroepen. Ik probeerde overal online te zoeken. Geen enkel idee. Kan iemand mij hier een aanwijzing/voorsprong over geven? Zeer gewaardeerd.
Antwoord 1, autoriteit 100%
Het verbaast me dat niemand de nieuwe Fetch API heeft genoemd, die op het moment van schrijven wordt ondersteund door alle browsers behalve IE11. Het vereenvoudigt de XMLHttpRequest-syntaxis die u in veel van de andere voorbeelden ziet.
De API bevat veel meer, maar begin met de fetch()methode. Er zijn twee argumenten nodig:
- Een URL of een object dat het verzoek vertegenwoordigt.
- Optioneel init-object dat de methode, headers, body enz. bevat.
Eenvoudig 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
}
Het vorige topantwoordopnieuw maken, een 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
}
Antwoord 2, autoriteit 49%
Uw 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");
}
Uw knopactie::
<button type="submit" onclick="UserAction()">Search</button>
Ga voor meer informatie naar de volgende link(bijgewerkt 2017/01/11)
Antwoord 3, autoriteit 7%
Hier is nog een Javascript REST API-aanroep met authenticatie met 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>
Antwoord 4, autoriteit 6%
$("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);
}
});
});
Antwoord 5, autoriteit 4%
Ik denk dat het beter is om if (this.readyState == 4 && this.status == 200) toe te voegen om te wachten:
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();
Antwoord 6
Voordat we iets aan de voorkant van de website proberen te plaatsen, moeten we eerst een verbinding maken met de API. We gebruiken hiervoor XMLHttpRequest-objecten, een manier om bestanden te openen en een HTTP-verzoek in te dienen.
We maken een aanvraagvariabele en wijzen er een nieuw XMLHttpRequest-object aan toe. Vervolgens openen we een nieuwe verbinding met de methode open() – in de argumenten specificeren we het type verzoek als GET, evenals de URL van het API-eindpunt. Het verzoek is voltooid en we hebben toegang tot de gegevens in de onload-functie. Als we klaar zijn, sturen we het verzoek.
// Maak een aanvraagvariabele en wijs er een nieuw XMLHttpRequest-object aan toe.
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()
Antwoord 7
Gebruikelijke manier is om met PHP en ajax te werken. Maar voor uw vereiste werkt het onderstaande prima.
<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>
Antwoord 8
Zonder twijfel gebruikt de eenvoudigste methode een onzichtbaar FORM-element in HTML dat de gewenste REST-methode specificeert. Vervolgens kunnen de argumenten worden ingevoegd in input type=hiddenwaardevelden met behulp van JavaScript en het formulier kan worden ingediend via de button click event listener of onclick event met één regel JavaScript. Hier is een voorbeeld dat ervan uitgaat dat de REST API zich in het bestand REST.php bevindt:
<body>
<h2>REST-test</h2>
<input type=button onclick="document.getElementById('a').submit();"
value="Do It">
<form id=a action="REST.php" method=post>
<input type=hidden name="arg" value="val">
</form>
</body>
Merk op dat dit voorbeeld de pagina zal vervangen door de uitvoer van pagina REST.php.
Ik weet niet zeker hoe ik dit moet wijzigen als u wilt dat de API wordt aangeroepen zonder zichtbaar effect op de huidige pagina. Maar het is zeker eenvoudig.