如何从JavaScript调用REST web服务API ?

我有一个HTML页面上的按钮。当我单击该按钮时，我需要调用一个REST Web服务API。我试着在网上到处找。毫无头绪。有人能给我个提示吗?非常感谢。

当前回答

到目前为止，对我来说最简单的是Axios。您可以下载节点模块，也可以将CDN用于更简单的项目。

CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

GET/POST的代码示例:

let postData ={key: "some value"}

    axios.get(url).then(response =>{
    //Do stuff with the response.
    })
        
    axios.post(url, postData).then(response=>{
    //Do stuff with the response.
    });

2022-10-27 17:27:59

其他回答

你的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)

2016-05-02 05:55:39

在我们尝试将任何东西放在网站前端之前，让我们打开一个API连接。我们将使用XMLHttpRequest对象，这是一种打开文件并发出HTTP请求的方法。

我们将创建一个请求变量，并将一个新的XMLHttpRequest对象分配给它。然后，我们将使用open()方法打开一个新连接——在参数中，我们将指定请求的类型为GET以及API端点的URL。请求完成后，我们可以访问onload函数中的数据。完成后，我们会发送请求。 //创建一个请求变量，并分配一个新的XMLHttpRequest对象给它。 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()

2019-06-17 05:33:26

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

2017-03-01 18:11:34

下面是另一个使用json进行身份验证的Javascript REST API调用:

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

2017-06-09 16:37:02

我很惊讶没有人提到新的Fetch API，在写这篇文章的时候，除了IE11，所有的浏览器都支持这个API。它简化了您在许多其他示例中看到的XMLHttpRequest语法。

API包含了更多内容，但首先从fetch()方法开始。它有两个参数:

表示请求的URL或对象。可选的init对象，包含方法，头，主体等。

简单的获得:

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
}

2018-08-15 06:44:38

如何从JavaScript调用REST web服务API ?

推荐文章

最新文章

标签