如何使用 Bitly V4 API 和 jQuery 缩短 URL答案

【问题标题】：How to shorten URL with Bitly V4 API and jQuery如何使用 Bitly V4 API 和 jQuery 缩短 URL
【发布时间】：2019-05-03 11:22:01
【问题描述】：

所以我尝试使用新的 V4 Bitly API 缩短 URL，但我收到 JSON 错误。

我的代码：

$(function() {
    $(".createBitly").on("click", function(e) {

        e.preventDefault();

        var url = $(this).attr("href");
        var accessToken = "xxx";

        var params = {
            "long_url" : encodeURIComponent(url)            
        };

        $.ajax({
            url: "https://api-ssl.bitly.com/v4/bitlinks",
            cache: false,
            dataType: "json",
            method: "POST",
            contentType: "application/json",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
            },
            data: params
        }).done(function(data) {
            console.log(data);
        }).fail(function(data) {
            console.error(data);
        });

    });
});

结果：422 http 错误；

  "{"message":"UNPROCESSABLE_ENTITY","resource":"bitlinks","description":"The JSON value provided is invalid."}"

但使用 CURL 运行它确实有效：How to shorten URL using PHP Bitly v4?

我做错了什么？仅使用 jQuery 是不可能的吗？

TIA。

【问题讨论】：

难道 long_url 值必须是转义的 JS 字符串，而不是通过对其应用 encodeURIComponent() 来编码？链接案例中的示例是 {"long_url":"https:\/\/stackoverflow.com\/questions\/ask"}。编码后将是“https%3A%2F%2Fstackoverflow.com%2Fquestions%2Fask”。我假设 Bitly 想要找到斜杠以处理 URL。有趣的是，Bitly API 文档说 long_url '必须'进行 uriencoded，但您链接到的示例中的答案使用 json_encode。
是的，您似乎没有发送正确的 json 编码数据
我也试过 escape()，没有运气。还尝试将“https:\/\/stackoverflow.com\/questions\/ask”作为字符串，也没有运气。

标签： javascript jquery api

【解决方案1】：

我已根据您上面的代码进行了此编辑，并且运行良好。

1) JSON.stringify 在发送请求之前（将您的请求转换为 JSON 格式）。

2) 不需要encodeURIComponent()。

$(function() {
  $(".createBitly").on("click", function(e) {

    e.preventDefault();

    var url = $(this).attr("href");
    var accessToken = "token";

    var params = {
        "long_url" : url           
    };

    $.ajax({
        url: "https://api-ssl.bitly.com/v4/shorten",
        cache: false,
        dataType: "json",
        method: "POST",
        contentType: "application/json",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
        },
        data: JSON.stringify(params)
    }).done(function(data) {
        console.log(data);

    }).fail(function(data) {
        console.log(data);
    });
  });
});

【讨论】：