我有一个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
}
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?