Fatal编程技术网
  • javascript/
  • 如何在JavaScript中发送和请求HTTP方法？

如何在JavaScript中发送和请求HTTP方法？

javascript html

如何在JavaScript中发送和请求HTTP方法？,javascript,html,Javascript,Html,我试图访问一些基于IP地址的信息，并希望使用JavaScript将其显示在我的网页中。我是根据IP地址获取数据的，但当我尝试使用JavaScript时，在没有输出的同时，我没有收到任何错误 下面是我的代码。请给我一些有价值的信息，并尝试更正我的代码 <!DOCTYPE html> <html> <head> <title>JS Get Request</title> </head> <body> <

我试图访问一些基于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>


JSGET请求
JavaScript获取请求测试
状态代码：


statusMessage:


ipAddress:


countryCode:


countryName:


地区名称：


城市名称：城市名称
zipCode:


纬度：


var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
var anHttpRequest=newxmlhttprequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）
aCallback（anhtprequest.responseText）；
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
}
var theurl=http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
var client=新的HttpClient（）；
get（URL、函数（resonse）{
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（“纬度”）.innerHTML=response1.latitude；
这里有一个JSFIDLE示例：单击run获取数据
您有两个错误：
1-输入错误响应，
2-移动所有文档。getElementById。。。。获取（URL，函数（响应）{…} 这应该有效：

<!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>


JSGET请求
JavaScript获取请求测试
运行

状态代码：


statusMessage:


ipAddress:


countryCode:


countryName:


地区名称：


城市名称：城市名称
zipCode:


纬度：


var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
var anHttpRequest=newxmlhttprequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）
aCallback（anhtprequest.responseText）；
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
}
var theurl=http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
函数测试（）{
var client=新的HttpClient（）；
get（URL、函数（响应）{
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（“纬度”）.innerHTML=response1.latitude；
});
}
正如@Arvind comment所述，您需要将您的
var response1
和所有
文档.getElementById（“Foo”）.innerHTML=response1.Foo；
放在同一位置

在第10行有一个
statusMessage:
而不是
statusMessage

在第33行，输入错误应该是：
client.get（URL，函数（响应）{

已过时，

不需要结束斜杠

这是完整的代码


JSGET请求
JavaScript获取请求测试

状态代码：


statusMessage:


ipAddress:


countryCode:


countryName:


地区名称：


城市名称：


zipCode:


纬度：


var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
var anHttpRequest=newxmlhttprequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）
aCallback（anhtprequest.responseText）；
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
}
var theurl=http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
var客户机=新

<!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>