如何在 ajax 页面中获取查询字符串或 URL？答案

【问题标题】：How to get querystring or URL inside ajax page?如何在 ajax 页面中获取查询字符串或 URL？
【发布时间】：2014-09-26 10:15:25
【问题描述】：

我找到了从this question 获取查询字符串的方法。但我无法通过 ajax 获取请求页面内的 URL。

例子：

<div class="result"></div>
<script>
    $(function() {
        $.ajax({
            url: 'ajax_inner.html',
            type: 'GET',
            data: 'somename=someval',
            dataType: 'html',
            success: function(data) {
                $('.result.).html(data);
            }
        });
    });
</script>

这是 main.html 页面。下面是 ajax_inner.html 页面。

<p>your query string is: <span class="qsval"></span>.</p>
<script>
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }// getParameterByName

    $(function() {
        $('.qsval').text(getParameterByName('somename'));
    });
</script>

我无法从传递给 ajax 页面的查询字符串中获取任何信息。我尝试在 ajax 页面内alert(location);，但它返回 main.html 页面。

如何获取查询字符串inside ajax 页面？

【问题讨论】：

标签： javascript jquery ajax query-string

【解决方案1】：

您必须记住，使用.html 注入<script> 标记将使脚本在调用页面 上执行，而不是在目标页面上执行。您需要让 服务器 根据 QueryString 更改 ajax_inner.html 的内容。

那么你必须问自己，你为什么要尝试在目标上执行脚本，而不是在你的成功回调中？为什么不这样做：

success: function(data) {
    $('.result').html(data).find(".qsval").text("someval");
}

"someval" 可以来自任何局部变量。

【讨论】：

在那之后我不能使用 .find ，因为在我的 ajax_inner.html 中必须加载数据并将其设置为选择框。要找到带有 option[value="someval"] 的选择框并使用此方法将其选中是不可能的，因为一旦 ajax_inner.html 加载 .find 内部成功：工作而 ajax_inner.html 内部的 js 没有完成他们的工作。但是我会找到另一种方法来改变它。谢谢你:)

【解决方案2】：

基本上，问题在于没有有自己的 URL 的“Ajax 页面”，只有一些您动态加载并插入到其他/唯一页面的 HTML 内容。如果它们从一开始就在页面中而不是动态加载，那么您的 ajax_inner.html 内容将处于相同的上下文中（尽管如果在加载时在页面上，包含的脚本显然会更快地执行）。它没有自己的范围，location 因此只是指父/唯一页面的location 属性。

您可能会将动态加载 HTML 内容与 <iframe>s 混淆，可以这么说，它们有自己的页面范围。

【讨论】：