为什么这个jquery ajax不起作用？

如果我运行这个，我得到“发送”消息，但“收到”消息不显示。为什么？错误消息是失败和错误块中的无传输。为什么这个jquery ajax不起作用？

HTML：

<ul> 
    <li><a href="http://www.hotmail.com">hotmail.com</a></li> 
    <li><a href="http://www.google.com">google.com</a></li> 
</ul>

JS：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a").each(function (index) { 
      var sUrl = 'http://tinyurl.com/api-create.php?url=' + $(this).attr('href') 
      alert('sending: ' + sUrl); 
      $.ajax({ 
       url: sUrl, 
       crossDomain: true 
      }).fail(function (data) { 
       alert('failed: ' + data.statusText); 
      }).error(function (data) { 
       alert('error: ' + data.statusText); 
      }).done(function (data) { 
       alert('received: ' + sUrl); 
      }); 
     }); 
    }); 
</script>

编辑：接受的答案使用$ .getJSON它调用$就在内部。对于那些可能对低级$ .ajax感兴趣的人，在这里，你去。

$('a').each(function (index) { 
    var app = 'http://json-tinyurl.appspot.com/'; 
    var sUrl = app + '?url=' + $(this).attr('href') + '&callback=?'; 
    $.ajax({ 
     url: sUrl, 
     dataType: 'json', 
     success: function (data) { 
      alert('ajax:' + data.tinyurl); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      alert("jqXHR=" + jqXHR.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown); 
     } 
    }); 
});

来源

2012-05-26 Ray Cheng

你有什么错误吗？ – j08691

没有错误，没有任何东西。 –

你是否在任何devtools /萤火虫中看到你的请求？ – lanzz

由于您正在进行跨域调用而不使用jsonp，因此您遇到了问题。一看便知这里解决您的TinyURL的生成问题：

Create TinyURL via Jquery Ajax call

使用，作为参考，这里是你的固定码：

$(document).ready(function() { 
    $("a").each(function(index) { 
     var sUrl = $(this).attr('href'); 
     $.getJSON("http://json-tinyurl.appspot.com/?&callback=?", { 
      url: sUrl 
     }, function(data) { 
      alert(data.tinyurl); 
     }); 
    }); 
});

来源

2012-05-26 20:51:06

为什么它必须通过appspot.com？我不能直接去tinyurl.com吗？ –

appspot链接是某人写的JSONP包装器，允许您通过AJAX使用tinyurl。 Tinyurl不直接支持AJAX请求，所以这是必要的。我链接到的答案和此页面上的其他答案提供了一些关于在没有服务器支持JSONP响应的情况下无法进行跨域ajax调用的原因的更多详细信息。 –

跨域参数不会做你认为它确实。从JQuery文档：

如果您希望在同一个域上强制使用跨域请求（例如JSONP），请将crossDomain的值设置为true。这允许，例如，服务器端重定向到另一个域。

请注意，如果您通过AJAX请求来自其他域的URL，JQuery将默认设置为true - 因此您无需自行设置它。

代码不工作的原因是您没有正确设置跨域AJAX。由于潜在的安全漏洞，浏览器会按照Same Origin Policy的要求提供AJAX请求。因此，您试图通过AJAX请求访问tinyURL API的事实将被浏览器自动阻止。您将需要使用诸如JSONP之类的机制来实现此功能。

Try this blog post，它有一个使用JQuery/AJAX/JSONP从TinyURL API中获取缩短URL的例子。它最后还有一些关于JSONP的背景链接。请注意，这有点旧，所以您可能需要将语法更新到当前的JQuery/TinyURL API。使用JSONP后面的基本思想是不变的。

来源

2012-05-26 20:52:43 handsomeransoms

为什么这个jquery ajax不起作用？

回答

相关问题