2016-05-02 24 views
31

Tôi có một trang HTML có nút trên đó. Khi tôi nhấp vào nút đó, tôi cần gọi một API dịch vụ web còn lại? Tôi đã thử tìm kiếm trực tuyến ở mọi nơi. Không có manh mối nào. Ai đó có thể cho tôi một khách hàng tiềm năng/Headstart về điều này? Rất nhiều đánh giá caoLàm cách nào để gọi API dịch vụ web REST từ nút Javascript Trình xử lý?

+0

Cuộc gọi tới dịch vụ REST chỉ là yêu cầu tới máy chủ, tôi đoán đây sẽ là yêu cầu ajax. Sử dụng jQuery ví dụ http://api.jquery.com/jquery.ajax/ – john

Trả lời

53

Javascript của bạn:

function UserAction() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("POST", "Your Rest URL Here", true); 
    xhttp.setRequestHeader("Content-type", "application/json"); 
    xhttp.send(); 
    var response = JSON.parse(xhttp.responseText); 
} 

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

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

Để biết thêm thông đi qua các link (2017/01/11 cập nhật) sau

+9

XMLHttpRequest đồng bộ trên chuỗi chính không được chấp nhận vì các hiệu ứ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 http://xhr.spec.whatwg.org/ –

+0

Vì bạn đang thực hiện cuộc gọi được đồng bộ hóa, bạn cần gọi 'xhttp.open ("POST", "URL còn lại của bạn tại đây", sai); ', 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. –

3
$("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); 
     } 
     }); 
}); 
5

Đây là một lệnh gọi API REST REST khác có xác thực bằng cách sử dụ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> 
Các vấn đề liên quan