Làm cách nào để gọi API dịch vụ web REST từ JavaScript?

166

Tôi có một trang HTML với một nút trên đó. Khi tôi nhấp vào nút đó, tôi cần gọi API dịch vụ web REST. Tôi đã cố gắng tìm kiếm trực tuyến ở khắp mọi nơi. Không có manh mối gì. Ai đó có thể cho tôi một dẫn / Headstart về điều này? Rất nhiều đánh giá cao.

— Shaik Syed Ali
nguồn

Cuộc gọi của bạn đến dịch vụ REST chỉ là một yêu cầu đến máy chủ, tôi đoán đó sẽ là một yêu cầu ajax. Sử dụng jQuery ví dụ api.jquery.com/jquery.ajax

— ikos23

170

Tôi ngạc nhiên không ai đề cập đến API Fetch mới, được hỗ trợ bởi tất cả các trình duyệt ngoại trừ IE11 tại thời điểm viết bài. Nó đơn giản hóa cú pháp XMLHttpRequest mà bạn thấy trong nhiều ví dụ khác.

API bao gồm nhiều hơn nữa , nhưng bắt đầu với fetch()phương thức. Phải mất hai đối số:

Một URL hoặc một đối tượng đại diện cho yêu cầu.
Đối tượng init tùy chọn chứa phương thức, tiêu đề, phần thân, v.v.

NHẬN đơn giản:

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
}

Tái tạo câu trả lời hàng đầu trước đó , BÀI ĐĂNG:

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
}

— Brendan McGill
nguồn

2

Làm thế nào để hành động nút trông như thế nào với giải pháp này?

— asmaier

3

Điều gì về XÓA và PUT?

— Krzysztof

2

@asmaier bạn có nhận được câu trả lời về hành động của nút sẽ như thế nào không? Cảm ơn

— Angel Esguerra

1

button.addEventListener('click', userAction);hoặc<button onclick="userAction()" />

— Brendan McGill

105

Javascript của bạn:

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

Nút hành động của bạn ::

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

Để biết thêm thông tin, hãy truy cập liên kết sau (Cập nhật 2017/01/11)

— Abhishek
nguồn

19

XMLHttpRequest đồng bộ trên luồng chính bị phản đối vì những tác động bất lợi của nó đối với trải nghiệm của người dùng cuối. Để được trợ giúp thêm xhr.spec.whatwg.org

— jeet.chanchaw

Vì bạn đang thực hiện một cuộc gọi được đồng bộ hóa, bạn cần gọi xhttp.open("POST", "Your Rest URL Here", false);, nếu không xhttp.responseText sẽ không chứa kết quả. Nhưng như đã nói, nó sẽ sớm bị phản đối.

— Alexandre Fenyo

Nếu đây là một yêu cầu POST, bạn thực sự đăng dữ liệu ở đâu?

— EFC

" xhttp.setRequestHeader("Content-type", "application/json");" - Đây là một lời nói dối. Bạn không chuyển bất kỳ JSON nào cho send()phương thức.

— Quentin

Bạn đã chỉnh sửa mã này để yêu cầu không còn đồng bộ, nhưng bạn đang cố đọc phản hồi như thể nó là.

— Quentin

17

Đây là một cuộc gọi API REST REST khác với xác thực bằng 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>

— người dùng1713008
nguồn

bạn đã không phải đối mặt với bất kỳ vấn đề tên miền chéo? Tôi đang gọi một api được lưu trữ ở một nơi khác từ localhost và nó đang đưa ra các vấn đề tên miền chéo.

— Harit Vishwakarma

Tôi cũng phải đối mặt với vấn đề tương tự..plz giúp đỡ

— Nitin Wahale

@HaritVishwakarma - sẽ như vậy nếu api bạn đang gọi không có Access-Control-Allow-Origin cho tên miền của bạn (localhost). Hãy thử tạo proxy của riêng bạn, gửi req đến proxy và chuyển tiếp yêu cầu đến đích của bạn. Vì đây sẽ là máy chủ liên lạc với máy chủ, nên yêu cầu sẽ không bị chặn (CORS bị chặn bởi trình duyệt). Gửi lại phản hồi này với tiêu đề cho phép nguồn gốc được đặt thành tất cả

— sss999

@HaritVishwakarma và NitinWahale và các nhà phát triển trong tương lai bạn chỉ có thể vô hiệu hóa bảo mật web trên trình duyệt cục bộ của mình cho mục đích thử nghiệm - điều này sẽ không hoạt động như một giải pháp sản xuất. Tham khảo tại đây: stackoverflow.com/questions/3102819/ Lời

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

— aayushi
nguồn

7

Tôi nghĩ rằng add if (this. YetState == 4 && this.status == 200) để chờ đợi là tốt hơn:

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
nguồn

Điều đó sẽ không hoạt động nếu máy khách và API không nằm trong cùng một miền, phải không?

— David Brossard

0

Trước khi chúng tôi cố gắng đặt bất cứ thứ gì lên mặt trước của trang web, hãy mở kết nối API. Chúng tôi sẽ làm như vậy bằng cách sử dụng các đối tượng XMLHttpRequest, đây là một cách để mở tệp và thực hiện một yêu cầu HTTP.

Chúng ta sẽ tạo một biến yêu cầu và gán một đối tượng XMLHttpRequest mới cho nó. Sau đó, chúng tôi sẽ mở một kết nối mới với phương thức open () - trong các đối số, chúng tôi sẽ chỉ định loại yêu cầu là GET cũng như URL của điểm cuối API. Yêu cầu hoàn thành và chúng ta có thể truy cập dữ liệu bên trong hàm onload. Khi chúng tôi hoàn thành, chúng tôi sẽ gửi yêu cầu.
// Tạo một biến yêu cầu và gán một đối tượng XMLHttpRequest mới cho nó. 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()

— Roshini Dasari
nguồn

1

Câu trả lời tương tự đã được đưa ra trước đây. Tại sao bạn thêm câu trả lời của bạn? Một mô tả ngắn có thể giúp

— slfan

-1

Cách thông thường là đi với PHP và ajax. Nhưng đối với yêu cầu của bạn, dưới đây sẽ hoạt động tốt.

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