2016-05-02 21 views
31

Mam stronę HTML z przyciskiem na nim. Po kliknięciu tego przycisku muszę wywołać interfejs API usługi Web Service? Próbowałem wyszukiwać w Internecie wszędzie. Bez cienia. Czy ktoś może mi w tym pomóc? Bardzo cenioneJak wywołać API usługi sieciowej REST z przycisku obsługi przycisku Javascript?

+0

Twoje połączenie z usługą REST jest po prostu prośbą do serwera, domyślam się, że będzie to żądanie ajax. Użyj jQuery na przykład http://api.jquery.com/jquery.ajax/ – john

Odpowiedz

53

JavaScript:

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

Twoje działanie Przycisk ::

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

Aby uzyskać więcej informacji przejść następującą link (Aktualizacja 2017/01/11)

+9

Synchroniczne XMLHttpRequest na głównym wątku jest przestarzałe ze względu na jego szkodliwe skutki dla użytkownika końcowego. Aby uzyskać dodatkową pomoc, http://xhr.spec.whatwg.org/ –

+0

Ponieważ wykonujesz zsynchronizowane połączenie, musisz wywołać 'xhttp.open (" POST "," Twój reszta URL tutaj ", false);', w przeciwnym razie xhttp.responseText nie zawiera wyniku. Ale, jak powiedziano wcześniej, wkrótce zostanie zaniechane. –

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

Oto kolejny interfejs API REST JavaScript, wywołanie z uwierzytelnianiem za pomocą 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> 
Powiązane problemy