Javascript:window.location.search没有更新?

5

如果用户在搜索面板上输入了查询参数,我需要更新URL。我正在尝试以下方法:

$( document ).ready(function() {
    if ($('.o_website_license_search_panel').length) {
        $('.o_website_license_search_panel .o_search_submit').click(function () {
            var search = $.deparam(window.location.search.substring(1));
            console.log('before update')
            console.log(window.location.search)
            search.license_key = $(".o_website_license_search_panel input[name='license_key']").val();
            console.log('new obj ', search, $.param(search))
            window.location.search = $.param(search);
            console.log('after update')
            console.log(window.location.search)
        });
    }
});

我得到了以下输出:

before update
web.assets_frontend.js:1254 ?license_state=cancel
web.assets_frontend.js:1255 new obj  {license_state: "cancel", license_key: "test2"} license_state=cancel&license_key=test2
web.assets_frontend.js:1256 after update
web.assets_frontend.js:1257 ?license_state=cancel

正如您所看到的,window.location.search保持不变。我是否有所遗漏,还是这是设计上的意图?..

2个回答

6
设置search(或location的其他属性,除了hash)会导致页面重新加载。在此之前,该属性将继续保持其先前的值,这就是为什么您在日志记录语句中看到先前的值的原因。旧值被记录后,除非页面上的代码阻止它发生,否则页面将以新的查询字符串重新加载,在这一点上,location.search将显示新字符串。

更多信息:MDN上window.location的属性


1
感谢您的解释。是的,这是我的问题。我有一个带有方法“post”的“表单”(用于相同的输入“license_key”),它也会触发页面重新加载。因此,看起来那个优先级更高,并且它将覆盖JS部分,我将无法看到“window.location.search”被更新。一旦我禁用了该表单,“window.location.search”就开始正确更新了。 - Andrius
1
这是我的问题。我不知道设置 location.search 会自动重新加载页面,所以我一直在手动调用 location.reload()。移除这个调用后问题得到解决,现在它完美地工作了。 - F1Krazy

0

你也可以使用 JavaScript 提供的历史记录 API 来帮助实现,但需要注意的是它不会刷新页面,而是在 URL 窗格中更改浏览器的 URL。巧妙地利用这一点,你可以实现你想要的效果。

点击此链接获取更多详细信息。

https://developer.mozilla.org/en-US/docs/Web/API/History_API

注意

有时人们使用这种方法来实现ajax,从而使他们能够存储历史数据并进行书签标记。


其实我需要刷新页面,因为这会触发控制器的路由,通过使用window.location.search中的查询来进行实际搜索,但无论如何感谢您提供的有用链接。 - Andrius
好的,这种方法通常在您不想刷新页面,而是想通过Ajax获取查询并同时启用书签和历史记录时广泛使用。例如,通过新的ajax请求获取window.location.search参数。 - Ezekiel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接