javascript - 如何通过 jQuery 的 .ajax() 方法在 GET 请求中发送包含斜杠的参数？

Question

我需要创建以下 URL 来通过 jQuery 的 .ajax() 函数调用 API:

https://www.airnowapi.org/aq/forecast/zipCode/?format=application/json&zipCode=02144&date=2016-11-26&distance=25&API_KEY=API_KEY

我知道如何通过将字符串单独组合在一起来形成它，但这似乎是一个不必要的解决方法，并且不允许我使用 .ajax()。我必须手动做很多这个函数应该为我做的工作。

问题在于这部分:format=application/json，因为当我将其作为设置对象中的参数传递给.ajax()时，它将斜杠转义为 %2F，并且 API 不接受该请求。我也尝试过省略格式参数，但收到 500 服务器错误。如果我只是将其输入到网络浏览器中，则该请求可以完美运行，但如果此参数丢失或不包含斜杠(无法转义)，则该请求将无法正常运行。我需要阻止 .ajax() 以这种方式对斜杠进行编码，或者在它到达 API 服务器之前以某种方式再次对其进行解码。

我已经在 Google 和 StackOverflow 上搜索过答案，但没有任何运气。我了解如何编码和解码转义字符，但我无法在我没有编写的 jQuery 函数中拦截它。除非我尝试根据 jQuery 源代码重写该函数，但这似乎是解决一个简单问题的一个大解决方法。作为引用，这是我的代码的相关部分:

function getData(query, callback) {
    var settings = {
        url: state.apis.airNow.BASE_URL,
        dataType: 'json',
        type: 'GET',
        success: callback,
        data: {
            format: "application/json",
            zipCode: query,
            distance: 25,
            API_KEY: state.apis.airNow.API_KEY
        }
    };
    $.ajax(settings);
}

如何让 .ajax() 以 API 期望的确切形式提交 format=application/json，或者我应该使用另一个类似的函数相反？

感谢您的帮助!

Answer 1

使用processData:false并手动构造查询字符串。值得注意的是，我的 makeQS 函数不会处理当前状态下的嵌套对象或数组。除此之外唯一的选择是传递 url 上的参数或拦截 AJAX 请求并更改 URL

处理数据解决方案:

function makeQS(obj){
    var params = [];
    for(var key in obj){
        params.push(key + '=' + obj[key]);
    }
    return params.join('&');
}


function getData(query, callback) {
    var settings = {
        url: state.apis.airNow.BASE_URL,
        dataType: 'json',
        type: 'GET',
        success: callback,
        processData: false,
        data: makeQS({
            format: "application/json",
            zipCode: query,
            distance: 25,
            API_KEY: state.apis.airNow.API_KEY
        })
    };
    $.ajax(settings);
}

如果您想通过 URL 传递它们，您可以将 settings.url 更改为如下内容:

settings.url = state.apis.airNow.BASE_URL + '?' + makeQS({
            format: "application/json",
            zipCode: query,
            distance: 25,
            API_KEY: state.apis.airNow.API_KEY
        })

可能还值得注意的是，由于根本没有对参数进行编码，因此任何参数中的 & 和 = 之类的字符很可能会导致 API 端点出现意外行为，这也是像这样的端点的原因之一这通常应该采用 URI 编码的 GET 参数`