Question

如果我运行这个，我收到“发送”消息，但“收到”消息没有显示。为什么？失败和错误块中的错误消息是No Transport。

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。对于那些可能对低级$ .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);
        }
    });
});

Answer 1

您遇到了问题，因为您正在进行跨域调用而不使用jsonp。请参阅此处的答案，以解决您的小问题：

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

Answer 2

crossDomain参数不符合您的预期。来自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的基本思想没有改变。

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

2 个答案: