如何访问 GET AJAX 请求的 URL？答案

【问题标题】：How to access the URL of a GET AJAX request?如何访问 GET AJAX 请求的 URL？
【发布时间】：2011-05-20 13:41:05
【问题描述】：

我查看了其他一些问题，但我仍然不确定如何实现这一目标。

情况是我有一个复杂的表单，它静态工作得很好，但我通过使用 AJAX 请求提交它来“让它变得更好”。

现在页面的 url 并没有像以前那样更改为包含参数，但我可以使用 firebug 看到完全限定的 url。

我的目标是获取这个网址并制作一个链接到它的按钮，以便用户可以将其添加为书签，因为目前无法为搜索结果添加书签。

很抱歉，如果这是完全重复的，但非常感谢任何帮助和建议。

这是我的 AJAX 请求（它们基本相同，但我有两个表单作为一个表单呈现给用户，一个简单搜索和一个切换的高级搜索）：

// setup AJAX request for simple search
$simpleform = $('#search');
$simpleform.submit(function() {
    $.ajax($simpleform.attr('action'), {
        data: $simpleform.serialize(),
        dataType: 'html',
        url: 'docsearch.php',
        type: 'GET', 

        beforeSend: function() {
            var $load = $('#loadingmessage');
            $('#search_results').fadeOut(1000);
            $load.hide().fadeIn(1000);

            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($('#placeholder'));
            }

            $load.html('Searching... Please wait...');

            // disable both search buttons
            $('.submit').attr('disabled', 'disabled');
            $('.submit').addClass("disabled");

            $('#advancedsearchbutton').attr('disabled', 'disabled');
            $('#advancedsearchbutton').addClass("disabled");
        },

    success: function(response) {
        // response is the text sent back by server

        // find the search_results div in the response and insert it after the placeholder div
        $(response).find('#search_results').insertAfter($('#placeholder')).fadeIn(1000); 
        // re-initialise lightbox and dataTable plugins
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "sPaginationType": "full_numbers",
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });
    },

    complete: function() {
        // hide loading message:
        $('#loadingmessage').fadeOut('slow');

        // enable both search buttons
        $('.submit').removeAttr("disabled");
        $('.submit').removeClass("disabled");

        checkDropdowns();
    }
});

return false; // Cancel default event
});
// end AJAX request

// setup AJAX request for advanced search
$form = $('#advancedsearchform');
$form.submit(function() {
    $.ajax($form.attr('action'), {
        data: $form.serialize(),
        dataType: 'html',
        url: 'docsearch.php',
        type: 'GET', 

        beforeSend: function() {
            var $load = $('#loadingmessage');
            $('#search_results').fadeOut(1000);
            $load.hide().fadeIn(1000);

            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($('#placeholder'));
            }
              $load.html('Searching... Please wait...');

            // disable both search buttons
            $('.submit').attr('disabled', 'disabled');
            $('.submit').addClass("disabled");

            $('#advancedsearchbutton').attr('disabled', 'disabled');
            $('#advancedsearchbutton').addClass("disabled");
        },

    success: function(response) {
        // response is the text sent back by server

        // find the search_results div in the response and insert it after the placeholder div
        $(response).find('#search_results').insertAfter($('#placeholder')).fadeIn(1000); 
        // re-initialise lightbox and dataTable plugins
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "sPaginationType": "full_numbers",
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });
    },

    complete: function() {
        // hide loading message:
        $('#loadingmessage').fadeOut('slow');

        // enable both search buttons
        $('.submit').removeAttr("disabled");
        $('.submit').removeClass("disabled");

        $('#advancedsearchbutton').removeAttr("disabled");
        $('#advancedsearchbutton').removeClass("disabled");
    }
});

return false; // Cancel default event
});
// end AJAX request

【问题讨论】：

标签： jquery ajax get forms

【解决方案1】：

我不知道为什么这是一个问题。 HTTP 请求的 URL 是 $.get() 的第一个参数。在这种情况下，它是由

返回的值

$('#search').attr('action');

和

$('#advancedsearchform').attr('action');

分别。

也许我在这里遗漏了什么？

编辑：

如何使用返回的字符串？即首先将其打印在页面上的任何位置。

您可以将字符串填充到 jQuery 对象中，然后将其附加到某处：

var action = $('#search').attr('action'),
    $span = $('<span/>', {text: action});

$('#placeholder').after($span);

【讨论】：

谢谢，我尝试通过执行以下操作将其打印到页面以查看其中包含的内容：$('#search').attr('action').insertAfter($('#placeholder')); 但这会破坏我的页面...
那是因为.attr()返回的是字符串，而不是jQuery对象，所以没有定义insertAfter()方法。使用调试器很容易找到这类问题 - 你在使用调试器吗？如果没有，你真的应该这样做。
啊，我明白你的意思了。嗯，在那种情况下 - 如何利用正在返回的字符串？即首先，将其打印在页面的任何位置。我在想，如果我可以使用所有参数将 url 从 docsearch.php?blahblah 修改为 staticdocsearch.php（这将是几乎相同的页面，但是一个静态表单而不是 ajax 表单），那么这可以工作。
非常感谢，不想当害虫但页面上的任何地方似乎都没有输出。我想也许你编辑的第一行之后的逗号应该是一个分号，但这并没有改变任何东西。不过我会继续努力并尝试将其附加到其他地方。
不，逗号不应该是分号。

【解决方案2】：

也许您可以考虑返回完全限定的 URL（带参数）作为响应的一部分，然后在 success: 块中处理它。

【讨论】：

我会推荐一个 JSON 格式的响应。看来您正在返回搜索结果的 HTML，对吗？因此，您需要做的就是返回带有 2 个对象的 JSON：URL 字符串和 HTML 字符串。

【解决方案3】：

我认为您会希望使用deep linking 来帮助您直接链接到搜索结果。您可以根据需要使用查询字符串（即domain.com/search.php?q=Whatever），但使用散列并对其进行解码可能更有意义（即domain.com/search.php#q=Whatever）。

【讨论】：

【解决方案4】：

jQquery 将原始 XHR 对象传递给事件处理程序。你可以利用它。在你的情况下，它可能是这样的：

success: function(response, status, hxr) {
    var whereFrom = xhr.responseXML.baseURI;

    (...)
}

【讨论】：

【解决方案5】：

我一直在寻找一种通过脚本为页面添加书签的简单方法，但每个浏览器处理它的方式不同，它可能弊大于利。深度链接是使动态页面成为书签的一个很好的解决方案，但是对于所有不同的搜索参数，我无法想象它很容易实现。我只需要一个按钮或一个链接，你可以按下它来重新加载附加了查询字符串参数的同一页面，所以我会说你在正确的轨道上。

我会按照@Keith 的建议去做，但是，由于为页面添加书签是客户端的问题，我会在“成功”处理程序中将客户端的 url 拼凑起来。

【讨论】：