Як викликати API веб-служби REST з JavaScript?

166

У мене HTML-сторінка з кнопкою на ній. Коли я натискаю на цю кнопку, мені потрібно викликати API веб-сервісу REST. Я намагався шукати в Інтернеті всюди. Ніякого поняття ні про що. Чи може хтось дати мені ведучий / Headstart з цього приводу? Дуже цінується.

— Шейк Сид Алі
джерело

Ваш дзвінок до служби REST - це лише запит на сервер, я думаю, це буде запит ajax. Використовуйте jQuery, наприклад, api.jquery.com/jquery.ajax

— ikos23

172

Я здивований, що ніхто не згадав про новий API Fetch, який підтримували всі браузери, крім IE11 під час написання. Це спрощує синтаксис XMLHttpRequest, який ви бачите у багатьох інших прикладах.

API включає в себе набагато більше , але почніть з fetch()методу. Це бере два аргументи:

URL-адреса або об'єкт, що представляє запит.
Необов’язковий об'єкт init, що містить метод, заголовки, тіло тощо.

Простий 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
}

Відтворюючи попередню головну відповідь , 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
}

— Брендан Макгілл
джерело

2

Як виглядає дія кнопки з цим рішенням?

— asmaier

3

Що щодо DELETE та PUT?

— Кшиштоф

2

@asmaier Ви отримали відповідь про те, як буде виглядати дія кнопки? Спасибі

— Angel Esguerra

1

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

— Брендан Макгілл

105

Ваш 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)

— Абхішек
джерело

19

Синхронний XMLHttpRequest в головному потоці застарілий через його згубний вплив на досвід кінцевого користувача. Для отримання додаткової допомоги xhr.spec.whatwg.org

— jeet.chanchawat

Оскільки ви здійснюєте синхронізований дзвінок, вам потрібно зателефонувати xhttp.open("POST", "Your Rest URL Here", false);, інакше xhttp.responseText не буде містити результат. Але, як було сказано раніше, воно скоро буде застарілим.

— Олександр Феньо

Якщо це запит POST, де ви фактично публікуєте дані?

— EFC

" xhttp.setRequestHeader("Content-type", "application/json");" - Це брехня. Ви не передаєте send()метод JSON .

— Квентін

Ви відредагували цей код, щоб запит більше не був синхронним, але ви намагаєтесь прочитати відповідь так, як ніби.

— Квентін

17

Ось ще один дзвінок API 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>

— користувач1713008
джерело

ви не стикалися з проблемами між домену? Я дзвоню api, розміщений десь ще з localhost, і він надає проблеми між домену.

— Харіт Вішвакарма

Я також зіткнувся з тими ж проблемами з корсами. Plz довідка

— Нітін Вахале

@HaritVishwakarma - це буде, якщо api, яку ви телефонуєте, не має Access-Control-Allow-Origin для вашого домену (localhost). Спробуйте створити власний проксі, надішліть req до проксі і переадресуйте запит до місця призначення. Оскільки це буде зв’язок між сервером і сервером, запит не буде заблокований (CORS блокується браузерами). Відправте цю відповідь за допомогою заголовка дозволеного походження для всіх

— sss999

@HaritVishwakarma та NitinWahale та майбутні розробники ви можете відключити веб-безпеку у вашому локальному браузері лише для тестування - це не працюватиме як виробниче рішення. Посилання тут: stackoverflow.com/questions/3102819/…

— 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);
        }
      });
});

— аяуші
джерело

8

Я думаю, додати, якщо (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();

— martinwang1985
джерело

Це не спрацює, якщо клієнт та API не знаходяться в одному домені, правда?

— Девід Броссар

0

Перш ніж ми спробуємо розмістити що-небудь на передньому кінці веб-сайту, давайте відкриємо з'єднання API. Ми зробимо це за допомогою об'єктів XMLHttpRequest, це спосіб відкрити файли та зробити HTTP-запит.

Ми створимо змінну запиту і призначимо їй новий XMLHttpRequest об’єкт. Тоді ми відкриємо нове з'єднання методом open () - в аргументах ми вкажемо тип запиту як GET, а також URL кінцевої точки API. Запит завершується, і ми можемо отримати доступ до даних всередині функції завантаження. Коли ми закінчимо, ми надішлемо запит.
// Створіть змінну запиту та призначте їй новий XMLHttpRequest об’єкт. var запит = новий 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()

— Рошині Дасарі
джерело

1

Подібні відповіді були раніше. Чому ви додали свою відповідь? Короткий опис може допомогти

— slfan

-1

Звичайний спосіб - це їхати з 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>