jquery - 使用 jquery ajax 从重定向请求中读取 url 参数

Question

我可以在浏览器中传递重定向 url 和用户 ID 的参数，顺便说一句，这是一个 Intranet 应用程序。因此，您可以粘贴诸如“http://intranetapp?redirect_url=http://crapola&userid=xxxxxxx”之类的地址。它会将您重定向到该 url 并提供用户 ID 的附加信息，这是我想要获得的数百用户。信息作为您被重定向的参数的一部分返回。有没有办法用ajax或jquery的相关方法调用（GET请求）并读取返回的url和参数，而不是仅仅获取返回的html？

Answer 1

克里斯，如果我理解正确的话，你想做的事情有点棘手。

我从来不需要做这种事情，但原则上知道它涉及一种不寻常类型的 ajax 请求 - 即“HEAD”请求，允许在不接收主要部分的情况下检查重定向 url（和其他元数据） HTTP 响应（正文）。

您的 Intranet 服务器应该处理 HEAD 请求（它们至少与 GET 一样安全）但不一定。如果没有，请与您的服务器管理员谈谈。如果您是服务器管理员，那么在httpd.conf文件和/或适当的.htaccess文件（假设为 Apache）中有一个根目录。

与所有类型的 ajax 一样，代码也很棘手，因为它的一部分需要异步运行（当来自服务器的 HTTP 响应返回时）。为了帮助实现这一点，可以（自由地）使用 jQuery 的 Deferreds/Promises。

您的主要工作人员功能（如果我理解正确的话）将是这样的：

function getUserParams(userID) {
    var $ = jQuery,
        dfrd = $.Deferred(),
        q = {},
        baseURL = 'http://intranetapp?redirect_url=http://crapola&userid=';
    $.ajax({
        type: "HEAD",
        url: baseURL + userID,
        cache: false,
        success: function(data, textStatus, jqXHR) {
            var location = jqXHR.getResponseHeader('Location');
            if(location){
                var search = $("<a>").attr('href', location).get(0).search.replace(/^[?]/, ''),
                    prop, pair;
                if (search) {
                    $.each(search.split("&"), function(i, arg) {
                        pair = arg.split("=");
                        if (pair.length >= 1) {
                            prop = pair.shift();
                            q[prop] = (pair.length == 1) ? pair[0] : (pair.length > 1) ? pair.join('=') : '';
                        }
                    });
                }
                //At this point q is a hash representing parameters in the location's search string.
                dfrd.resolve(userID, q);
            }
            else {
                dfrd.reject(userID, 'No redirect url in the response');
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            dfrd.reject(userID, 'Ajax failure: ' + textStatus + ': ' + errorThrown);
        }
    });
    return dfrd.promise();
}

请注意，因为 ajax 是异步的，所以我们返回的不是我们真正想要的结果；它们稍后到达，包装在 javascript plain objectq中。

以下是测试方法getUserParams()：

var userID = '12345678';
getUserParams(userID).done(function(userID, q) {
    //Work with userID and q as required
    console.log(['Success', userID, q.fullname, q.status, q.postalcode].join(': '));//for example
}).fail(function(userID, message) {
    //Handle error case here
    message = message || ''; 
    console.log(['Error', userID, message].join(': '));//for example
});

您的预期用途（包含数百个 url）将是这样的：

var userIDs = [
    //array of userIDs (hard coded or otherwise constructed)
    '1234',
    '5678'
];
var promises = [];
$.each(userIDs, function(i, userID) {
    var p = getUserParams(userID).done(function(userID, q) {
        //work with userID and q as required
        $("<p/>").text([userID, q.fullname, q.status, q.postalcode].join(': ')).appendTo($("#results"));//for example
    }).fail(function(userID, message) {
        //handle error case here
        message = message || ''; 
        console.log(['Error', userID, message].join(': '));//for example
    });
    promises.push(p);
});

当收到所有 ajax 请求的响应时，您可能还想做一些事情。如果是这样，那么附加代码将如下所示：

$.when.apply(null, promises).done(function() {
    //Do whatever is required here when ALL ajax requests have successfully responsed.
    //Note: any single ajax failure will cause this action *not to happen*
    //alert('All user data was gathered');
    console.log('All user data was gathered');
}).fail(function() {
    //Do whatever is required here when ALL ajax requests have responsed.
    //Note: any single ajax failure will cause this action *to happen*
    //alert('At least one set of user data failed');
    console.log('At least one ajax request for user data failed');
}).then(function() {
    //Do whatever is required here when ALL ajax requests have responsed.
    //Note: This function will fire after either the done or fail function.
    //alert('Gathering of user data complete, but not necessarily successfully');
    console.log('Gathering of user data complete, but not necessarily successfully');
});

部分测试（代码运行，但我没有办法测试重定向或处理Location标头）。

您将需要微调 [某些子集] 代码以精确使用q对象中的用户数据，并适当地处理错误。

Answer 2

这个功能可以帮助

function getUrl() {
    var args = {};                             // Start with an empty <a title="object" href="http://muraliprashanth.me/category/javascript/object/">object</a>
    var query = location.search.substring(1);  // Get query string, minus '?'
    var pairs = query.split('&amp;');              // Split at ampersands
    for(var i = 0; i &lt; pairs.length; i++) {    // For each fragment
        var pos = pairs[i].indexOf('=');       // Look for 'name=value'
        if (pos == -1) continue;               // If not found, skip it
        var name = pairs[i].substring(0,pos);  // Extract the name
        var value = pairs[i].substring(pos+1); // Extract the value
        value = decodeURIComponent(value);     // Decode the value
        args[name] = value;                    // Store as a property
    }
    return args;                               // Return the parsed arguments
}