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

Question

I am trying to access some information based on IP Address and wish to display it in my web page using JavaScript. 我正在尝试访问一些基于IP地址的信息，并希望使用JavaScript在我的网页中显示这些信息。 I am getting my data based on IP address but when I try to do it with JavaScript, I am not getting any error same time no output. 我正在获取基于IP地址的数据，但是当我尝试使用JavaScript进行数据处理时，没有任何错误，同时没有输出。

Below I am posting my code. 下面，我发布我的代码。 Please give me some valuable information about this and also try to correct my code. 请给我一些有价值的信息，并尝试更正我的代码。

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

Answer 1

Here an example jsFiddle that works : https://jsfiddle.net/nsqpv5rr/ click run to get data 这是一个可行的jsFiddle示例： https ://jsfiddle.net/nsqpv5rr/单击运行以获取数据
you have 2 errors: 您有2个错误：
1- typo response <=> reponse, 1-错字回应<=>回应，
2- move all document.getElementById.... inside client.get(theurl, function(response){...} this should work : 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>

Answer 2

As @Arvind comment stated you need to put your var response1 and all of your document.getElementById("Foo").innerHTML = response1.Foo; 正如@Arvind注释所指出的那样，您需要将var response1和所有document.getElementById("Foo").innerHTML = response1.Foo;都放入。getElementById document.getElementById("Foo").innerHTML = response1.Foo; at the same place. 在同一个地方。

At line 10 you have a stausMessage : instead of statusMessage 在第10行，您有一个stausMessage :而不是statusMessage

At line 33 you have a typo error should be : client.get(theurl, function(response){ 在第33行，您输入错误，应为： client.get(theurl, function(response){

<center> is obsolete use CSS instead and <br> doesn't need a closing slash. <center>已过时，改用CSS，而 <br>不需要用斜杠。

Here's the full code. 这是完整的代码。

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

Related 有关

Answer 3

@Akshay, try with the below solution, you can make a call via ajax request and simply set crossDomain: true with your ajax call @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>

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

问题描述

3 个解决方案

解决方案1
0 2018-05-31 12:01:08

解决方案2
0 2018-05-31 12:01:32

解决方案3
0 已采纳 2018-05-31 12:01:40

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

问题描述

3 个解决方案

解决方案1 0 2018-05-31 12:01:08

解决方案2 0 2018-05-31 12:01:32

解决方案3 0 已采纳 2018-05-31 12:01:40

解决方案1
0 2018-05-31 12:01:08

解决方案2
0 2018-05-31 12:01:32

解决方案3
0 已采纳 2018-05-31 12:01:40