$ .getJSON,回调不运行

时间:2014-01-08 00:28:58

标签: javascript jquery coffeescript

问题:我的$ .getJSON请求的回调没有运行。

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

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);

函数记录后的两个控制台日志都为真。

上述版本因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/

3 个答案:

答案 0 :(得分:4)

您的元素ID问题是删除#

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

演示:Fiddle

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


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

$(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);
    });
});

演示:Fiddle


看起来你的coffeescript有缩进问题

$ ->
$.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")

演示:Fiddle

答案 1 :(得分:2)

你需要发出jsonp请求

$.getJSON('http://freegeoip.net/json/?callback=?',

答案 2 :(得分:0)

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