$ .getJSON，回调不运行

Posted 2021-04-16

The Problem: The call back on my $.getJSON request doesn't run.

在页面加载时，没有任何内容记录到控制台或在页面上更新，但当功能粘贴到控制台时，它会正确执行。

jQuery的：

 $(function() {
    $.getJSON('http://freegeoip.net/json/', function(location, textStatus, jqXHR) {
      console.log("callback running");
      console.log(textStatus);
      console.log(jqXHR);
      $('#region-name').html(location.region_name);
    });
 });
  console.log(typeof $ !== "undefined" && $ !== null);

  console.log($.getJSON != null);

功能日志为true后，两个控制台日志都会记录。

上述版本因SO而减少。这是完整的脚本。

#Geo.Coffee
$ ->
    $.getJSON(
        'http://freegeoip.net/json/?callback=?',
        (location, textStatus, jqXHR) ->  # example where I update content on the page.
            console.log "callback running"
            console.log textStatus
            console.log jqXHR  
            $('#region-name').html location.region_name  
            $('#areacode').html location.areacode
            $('#ip').html location.ip  
            $('#zipcode').html location.zipcode  
            $('#longitude').html location.longitude  
            $('#latitude').html location.latitude 
            $('#country-name').html location.country_name  
            $('#country-code').html location.country_code
            $('#city').html location.city 
            $('#region-code').html location.region_code
            $('container main content').append "<p>#{location.country_code}</p>"
            localStorage['loc'] = location.country_code
            if localStorage.loc is "US" then alert "Your From The US."  
    )#.fail(-> alert "fail").done( (loc) -> alert "done")
    console.log localStorage.loc
console.log $?
console.log $.getJSON? 

编译js：

(function() {
  $(function() {
    $.getJSON('http://freegeoip.net/json/?callback=?', function(location, textStatus, jqXHR) {
      console.log("callback running");
      console.log(textStatus);
      console.log(jqXHR);
      $('#region-name').html(location.region_name);
      $('#areacode').html(location.areacode);
      $('#ip').html(location.ip);
      $('#zipcode').html(location.zipcode);
      $('#longitude').html(location.longitude);
      $('#latitude').html(location.latitude);
      $('#country-name').html(location.country_name);
      $('#country-code').html(location.country_code);
      $('#city').html(location.city);
      $('#region-code').html(location.region_code);
      localStorage['loc'] = location.country_code;
      if (localStorage.loc === "US") {
        return alert("Your From The US.");
      }
    });
    return console.log(localStorage.loc);
  });

  console.log(typeof $ !== "undefined" && $ !== null);

  console.log($.getJSON != null);

}).call(this);

HTML：

<p id="region-name"></p>
<p id="areacode"></p>
<p id="ip"></p>
<p id="zipcode"></p>
<p id="longitude"></p>
<p id="latitude"></p>
<p id="country-name"></p>
<p id="country-code"></p>
<p id="city"></p>
<p id="region-code"></p>

正确的小提琴：http://jsfiddle.net/5DjEq/1/

答案

你的元素id是删除#的问题

<p id="region-name"></p>

但是：ぁzxswい

或者像Fiddle那样转义id选择器 - demo：$('#\#region-name').html(location.region_name);

---

此外，由于远程资源支持jsonp我建议使用它，如果你想支持IE <= 8 - 现在你正在使用远程资源提供的CORS支持

Fiddle

但是：ぁzxswい

---

看起来你的coffeescript有缩进问题

$(function () {
    $.getJSON('http://freegeoip.net/json/?callback=?', function (location, textStatus, jqXHR) {
        console.log("callback running");
        console.log(textStatus);
        console.log(jqXHR);
        $('#region-name').html(location.region_name);
    });
});

但是：ぁzxswい

另一答案

你需要发出jsonp请求

Fiddle

另一答案

我有同样的问题。原来是我的addblocker。 uBlock Origin阻止了几个ip服务。禁用它后，一切正常。