[英]How to send and request HTTP method in JavaScript?
我正在尝试访问一些基于IP地址的信息,并希望使用JavaScript在我的网页中显示这些信息。 我正在获取基于IP地址的数据,但是当我尝试使用JavaScript进行数据处理时,没有任何错误,同时没有输出。
下面,我发布我的代码。 请给我一些有价值的信息,并尝试更正我的代码。
<!DOCTYPE html>
<html>
<head>
<title>JS Get Request</title>
</head>
<body>
<center>JavaScript Get Request Test</center>
statusCode : <p id="statusCode"></p><br/>
stausMessage : <p id="statusMessage"></p><br/>
ipAddress : <p id="ipAddress"></p><br/>
countryCode : <p id="countryCode"></p><br/>
countryName : <p id="countryName"></p><br/>
regionName : <p id="regionName"></p><br/>
cityName : <p id="cityName"></p><br/>
zipCode : <p id="zipCode"></p><br/>
latitude : <p id="latitude"></p><br/>
<script type="text/javascript">
var HttpClient = function(){
this.get = function(aUrl, aCallback){
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if(anHttpRequest.readyState == 4 && anHttpRequest.status ==200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open("GET", aUrl, true);
anHttpRequest.send(null);
}
}
var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
var client = new HttpClient();
client.get(theurl, function(resonse){
var response1 = JSON.parse(response);
//alert(response);
});
document.getElementById("statusCode").innerHTML = response1.statusCode;
document.getElementById("statusMessage").innerHTML = response1.statusMessage;
document.getElementById("ipAddress").innerHTML = response1.ipAddress;
document.getElementById("countryCode").innerHTML = response1.countryCode;
document.getElementById("countryName").innerHTML = response1.countryName;
document.getElementById("regionName").innerHTML = response1.regionName;
document.getElementById("cityName").innerHTML = response1.cityName;
document.getElementById("zipCode").innerHTML = response1.zipCode;
document.getElementById("latitude").innerHTML = response1.latitude;
</script>
</body>
</html>
这是一个可行的jsFiddle示例: https ://jsfiddle.net/nsqpv5rr/单击运行以获取数据
您有2个错误:
1-错字回应<=>回应,
2-将所有document.getElementById ....移至client.get(theurl,function(response){...})内,这应该可以工作:
<!DOCTYPE html>
<html>
<head>
<title>JS Get Request</title>
</head>
<body>
<center>JavaScript Get Request Test</center>
<button onClick="test()">run</button><br>
statusCode : <p id="statusCode"></p><br/>
stausMessage : <p id="statusMessage"></p><br/>
ipAddress : <p id="ipAddress"></p><br/>
countryCode : <p id="countryCode"></p><br/>
countryName : <p id="countryName"></p><br/>
regionName : <p id="regionName"></p><br/>
cityName : <p id="cityName"></p><br/>
zipCode : <p id="zipCode"></p><br/>
latitude : <p id="latitude"></p><br/>
<script type="text/javascript">
var HttpClient = function(){
this.get = function(aUrl, aCallback){
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if(anHttpRequest.readyState == 4 && anHttpRequest.status ==200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open("GET", aUrl, true);
anHttpRequest.send(null);
}
}
var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
function test(){
var client = new HttpClient();
client.get(theurl, function(response){
var response1 = JSON.parse(response);
document.getElementById("statusCode").innerHTML = response1.statusCode;
document.getElementById("statusMessage").innerHTML = response1.statusMessage;
document.getElementById("ipAddress").innerHTML = response1.ipAddress;
document.getElementById("countryCode").innerHTML = response1.countryCode;
document.getElementById("countryName").innerHTML = response1.countryName;
document.getElementById("regionName").innerHTML = response1.regionName;
document.getElementById("cityName").innerHTML = response1.cityName;
document.getElementById("zipCode").innerHTML = response1.zipCode;
document.getElementById("latitude").innerHTML = response1.latitude;
});
}
</script>
</body>
</html>
正如@Arvind注释所指出的那样,您需要将var response1
和所有document.getElementById("Foo").innerHTML = response1.Foo;
都放入。getElementById document.getElementById("Foo").innerHTML = response1.Foo;
在同一个地方。
在第10行,您有一个stausMessage :
而不是statusMessage
在第33行,您输入错误,应为: client.get(theurl, function(response){
<center>
已过时, 改用CSS,而 <br>
不需要用斜杠。
这是完整的代码。
<!DOCTYPE html> <html> <head> <title>JS Get Request</title> </head> <body> <p style="text-align:center;">JavaScript Get Request Test</p> statusCode : <p id="statusCode"></p><br> statusMessage : <p id="statusMessage"></p><br> ipAddress : <p id="ipAddress"></p><br> countryCode : <p id="countryCode"></p><br> countryName : <p id="countryName"></p><br> regionName : <p id="regionName"></p><br> cityName : <p id="cityName"></p><br> zipCode : <p id="zipCode"></p><br> latitude : <p id="latitude"></p><br> <script type="text/javascript"> var HttpClient = function() { this.get = function(aUrl, aCallback) { var anHttpRequest = new XMLHttpRequest(); anHttpRequest.onreadystatechange = function() { if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) aCallback(anHttpRequest.responseText); } anHttpRequest.open("GET", aUrl, true); anHttpRequest.send(null); } } var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json'; var client = new HttpClient(); client.get(theurl, function(response) { var response1 = JSON.parse(response); //alert(response); document.getElementById("statusCode").innerHTML = response1.statusCode; document.getElementById("statusMessage").innerHTML = response1.statusMessage; document.getElementById("ipAddress").innerHTML = response1.ipAddress; document.getElementById("countryCode").innerHTML = response1.countryCode; document.getElementById("countryName").innerHTML = response1.countryName; document.getElementById("regionName").innerHTML = response1.regionName; document.getElementById("cityName").innerHTML = response1.cityName; document.getElementById("zipCode").innerHTML = response1.zipCode; document.getElementById("latitude").innerHTML = response1.latitude; }); </script> </body> </html>
@Akshay,尝试以下解决方案,您可以通过ajax请求进行呼叫,并只需将crossDomain:true设置为您的ajax呼叫
<!DOCTYPE html>
<html>
<head>
<title>JS Get Request</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<center>JavaScript Get Request Test</center>
statusCode : <p id="statusCode"></p><br/>
stausMessage : <p id="statusMessage"></p><br/>
ipAddress : <p id="ipAddress"></p><br/>
countryCode : <p id="countryCode"></p><br/>
countryName : <p id="countryName"></p><br/>
regionName : <p id="regionName"></p><br/>
cityName : <p id="cityName"></p><br/>
zipCode : <p id="zipCode"></p><br/>
latitude : <p id="latitude"></p><br/>
<script type="text/javascript">
function callback(response1) {
document.getElementById("statusCode").innerHTML = response1.statusCode;
document.getElementById("statusMessage").innerHTML = response1.statusMessage;
document.getElementById("ipAddress").innerHTML = response1.ipAddress;
document.getElementById("countryCode").innerHTML = response1.countryCode;
document.getElementById("countryName").innerHTML = response1.countryName;
document.getElementById("regionName").innerHTML = response1.regionName;
document.getElementById("cityName").innerHTML = response1.cityName;
document.getElementById("zipCode").innerHTML = response1.zipCode;
document.getElementById("latitude").innerHTML = response1.latitude;
}
var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
$.ajax({
type: "POST",
url: theurl,
crossDomain: true,
success: function (data) {
callback(data);
// do something with server response data
},
error: function (err) {
// handle your error logic here
}
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.