У меня есть HTML-страница с кнопкой. Когда я нажимаю на эту кнопку, мне нужно вызвать API REST Web Service. Я пытался искать онлайн везде. Понятия не имею. Может ли кто-нибудь дать мне руководство по этому вопросу? Очень ценится.
Ответы:
Я удивлен, что никто не упомянул новый Fetch API, поддерживаемый всеми браузерами, кроме IE11, на момент написания. Это упрощает синтаксис XMLHttpRequest, который вы видите во многих других примерах.
API включает в себя гораздо больше , но начнем с fetch()метода. Требуется два аргумента:
Простой 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
}Воссоздание предыдущего топ-ответа , ПОЧТА:
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
}button.addEventListener('click', userAction);или<button onclick="userAction()" />
Ваш 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");
}Ваше действие кнопки ::
<button type="submit" onclick="UserAction()">Search</button>Для получения дополнительной информации перейдите по следующей ссылке (Обновлено 2017/01/11)
xhttp.open("POST", "Your Rest URL Here", false);, иначе xhttp.responseText не будет содержать результат. Но, как уже было сказано, это скоро будет объявлено устаревшим.
xhttp.setRequestHeader("Content-type", "application/json");» - это ложь. Вы не передаете JSON в send()метод.
Вот еще один вызов Javascript REST API с аутентификацией с использованием 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> $("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);
}
});
});Я думаю, что лучше добавить (this.readyState == 4 && this.status == 200) для ожидания:
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();Прежде чем мы попытаемся разместить что-нибудь в интерфейсе сайта, давайте откроем соединение с API. Мы сделаем это с помощью объектов XMLHttpRequest, которые позволяют открывать файлы и отправлять HTTP-запросы.
Мы создадим переменную запроса и назначим ей новый объект XMLHttpRequest. Затем мы откроем новое соединение с помощью метода open () - в аргументах мы будем указывать тип запроса в виде GET, а также URL-адрес конечной точки API. Запрос завершен, и мы можем получить доступ к данным внутри функции onload. Когда мы закончим, мы отправим запрос.
// Создать переменную запроса и назначить ей новый объект 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()Обычный путь - использовать PHP и AJAX. Но по вашему требованию ниже будет работать нормально.
<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>