2016-05-02 4 views
31

У меня есть HTML-страница с кнопкой на ней. Когда я нажимаю на эту кнопку, мне нужно вызвать API веб-сервиса Rest Web? Я пробовал искать в Интернете везде. Никакой подсказки. Может ли кто-нибудь дать мне лидерство/Headstart? Очень ценитсяКак вызвать API веб-сервиса REST из Javascript-кнопки Handler?

+0

Ваш вызов службы REST - это просто запрос на сервер, я думаю, это будет запрос ajax. Используйте jQuery, например http://api.jquery.com/jquery.ajax/ – john

ответ

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

Ваше действие Кнопка ::

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

Для получения дополнительной информации перейдите по следующей link (Обновлено 2017/01/11)

+9

Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для опыта конечного пользователя. Для получения дополнительной справки http://xhr.spec.whatwg.org/ –

+0

Поскольку вы выполняете синхронизированный вызов, вам нужно вызвать 'xhttp.open (« POST »,« URL вашего останова здесь », false);', иначе xhttp.responseText не будет содержать результат. Но, как говорилось ранее, это будет скоро осуждаться. –

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

Вот еще один Javascript REST API Call с аутентификацией с использованием 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> 
Смежные вопросы