如何在JavaScript中發送和請求HTTP方法？
[英]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>
3 個解決方案
解決方案1
0 2018-05-31 12:01:08
這是一個可行的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>
解決方案2
0 2018-05-31 12:01:32
正如@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>
解決方案3
0 已采納 2018-05-31 12:01:40
@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請求到Rails
[英]How to send an http request with parameters to rails from javascript
Javascript-如何在不重定向HTTP請求的情況下發送它？
[英]Javascript - How would I send a http request without it being redirected?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.