我有一个带有按钮的HTML页面。当单击该按钮时,我需要调用REST Web服务API。我已经在网上搜索了所有地方,但完全没有头绪。有人能给我个提示/入门吗?非常感谢。
我有一个带有按钮的HTML页面。当单击该按钮时,我需要调用REST Web服务API。我已经在网上搜索了所有地方,但完全没有头绪。有人能给我个提示/入门吗?非常感谢。
我很惊讶没人提到新的Fetch API,目前除了IE11以外的所有浏览器都支持它。它简化了在其他示例中看到的XMLHttpRequest语法。
API包括更多内容,但首先使用fetch()
方法。 它有两个参数:
简单的GET请求:
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
}
button.addEventListener('click', userAction);
或者 <button onclick="userAction()" />
的意思是在点击按钮时执行名为 userAction
的函数。 - Brendan McGill你的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)
xhttp.open("POST", "这里是您的 REST URL", false);
,否则 xhttp.responseText 将不包含结果。但如前所述,它将很快被弃用。 - Alexandre Fenyoxhttp.setRequestHeader("Content-type", "application/json");
" — 这是个谎言。你没有向 send()
方法传递任何 JSON。 - Quentin这是另一个使用 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>
$("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);
}
});
});
我认为加上 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();
const axios = require('axios');
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
});
<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.
});
在我们尝试将任何东西放在网站前端之前,让我们先打开与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()
input type=hidden
值字段中,并且可以使用一行JavaScript从按钮点击事件侦听器或onclick事件提交表单。这里是一个示例,假设REST API在文件REST.php中:<body>
<h2>REST-test</h2>
<input type=button onclick="document.getElementById('a').submit();"
value="Do It">
<form id=a action="REST.php" method=post>
<input type=hidden name="arg" value="val">
</form>
</body>
通常的方法是使用PHP和ajax。但对于您的要求,以下方法也可以正常工作。
<body>
https://www.google.com/controller/Add/2/2<br>
https://www.google.com/controller/Sub/5/2<br>
https://www.google.com/controller/Multi/3/2<br><br>
<input type="text" id="url" placeholder="RESTful URL" />
<input type="button" id="sub" value="Answer" />
<p>
<div id="display"></div>
</body>
<script type="text/javascript">
document.getElementById('sub').onclick = function(){
var url = document.getElementById('url').value;
var controller = null;
var method = null;
var parm = [];
//validating URLs
function URLValidation(url){
if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
var x = url.split('/');
controller = x[3];
method = x[4];
parm[0] = x[5];
parm[1] = x[6];
}
}
//Calculations
function Add(a,b){
return Number(a)+ Number(b);
}
function Sub(a,b){
return Number(a)/Number(b);
}
function Multi(a,b){
return Number(a)*Number(b);
}
//JSON Response
function ResponseRequest(status,res){
var res = {status: status, response: res};
document.getElementById('display').innerHTML = JSON.stringify(res);
}
//Process
function ProcessRequest(){
if(method=="Add"){
ResponseRequest("200",Add(parm[0],parm[1]));
}else if(method=="Sub"){
ResponseRequest("200",Sub(parm[0],parm[1]));
}else if(method=="Multi"){
ResponseRequest("200",Multi(parm[0],parm[1]));
}else {
ResponseRequest("404","Not Found");
}
}
URLValidation(url);
ProcessRequest();
};
</script>