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


当前回答

我想加上if (this。readyState == 4 && this。Status == 200)等待更好:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "your url", true);

xhttp.send();

其他回答

我想加上if (this。readyState == 4 && this。Status == 200)等待更好:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "your url", true);

xhttp.send();

在我们尝试将任何东西放在网站前端之前,让我们打开一个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()

如果这对任何人都有帮助,如果你对外部库没问题,那么我可以为Axios担保,它有一个非常干净的API和丰富的文档来处理REST调用,下面是一个例子

const axios = require('axios');

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  });
    $("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);
        }
      });
});

我很惊讶没有人提到新的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
}