如何从 JavaScript 调用 REST Web 服务 API？

Question

我有一个带有按钮的 HTML 页面。当我点击那个按钮时，我需要调用一个 REST Web 服务 API。我尝试在网上到处搜索。一点头绪都没有。有人可以在这方面给我一个领导/先机吗？非常感谢。

原文由 Shaik Syed Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

API 包含 更多内容，但从 fetch() 方法开始。它需要两个参数：

1. 表示请求的 URL 或对象。

2. 包含方法、标题、正文等的可选初始化对象。

简单获取：

 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
 }

原文由 Brendan McGill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你的脚本：

 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）

原文由 Abhishek 发布，翻译遵循 CC BY-SA 4.0 许可协议