我试图捕获表单的提交按钮,如果表单已提交,页面将刷新,并显示一些隐藏字段。我想捕获表单是否在之前提交过,如果在重新加载时提交,我想取消隐藏隐藏字段。我试图使用一个全局变量来实现这一点,但是我无法使它正常工作。
以下是我尝试过的:
var clicked = false;
$(document).ready(function() {
$("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch'; clicked = true; return true;");
if (clicked == true) {
// show hidden fields
} else {
// don't show hidden fields
}
});
关于此代码的错误有什么建议吗?
4条答案
按热度按时间aiazj4mn1#
由于http是无状态的,因此每次加载页面时,它都将使用javascript中设置的初始值。您不能在js中设置全局变量,而只是在再次加载页面后保持该值。
有几种方法可以将值存储在另一个位置,以便在加载时使用javascript对其进行初始化
查询字符串
使用
GET
方法,则使用查询字符串更新url(?parameter=value&something=42
). 您可以通过将表单中的输入字段设置为特定值来利用这一点。这是最简单的例子:初始加载页面时,未设置任何查询字符串。当您提交此表格时
name
及value
输入的组合在查询字符串中作为clicked=true
. 因此,当页面再次加载该查询字符串时,您可以检查按钮是否被单击。要读取此数据,可以在页面加载时使用以下脚本:
(来源)
能否使用它取决于您的表单当前的工作方式,如果您已经使用了帖子,那么这可能会有问题。
此外,对于较大的数据集,这不是最优的。传递字符串不是什么大问题,但对于数组和数据对象,您可能应该使用web存储或cookie。虽然不同浏览器的详细信息略有不同,但uri长度的实际限制约为2000个字符
网络存储
随着html5的引入,我们还获得了web存储,它允许您在浏览器中跨页面加载保存信息。有
localStorage
它可以将数据保存更长的时间(只要用户不手动清除),并且sessionStorage
仅在当前浏览会话期间保存数据。后者在这里对您很有用,因为您不希望在用户稍后返回时将“clicked”设置为true。在这里,我在按钮单击事件上设置了存储,但是您也可以将其绑定到表单提交或其他任何内容。
然后,当您加载页面时,您可以使用以下方法检查是否设置了该页面:
即使此值仅在此浏览会话期间保存,您也可能希望更早地重置它。为此,请使用:
如果要保存js对象或数组,应将其转换为字符串。根据规范,应该可以保存其他数据类型,但这还没有在浏览器中正确实现。
浏览器支持非常好,所以您应该可以安全地使用它,除非您需要支持非常旧/晦涩的浏览器。web存储是未来。
饼干
web存储的另一种选择是将数据保存在cookie中。Cookie主要用于在服务器端读取数据,但也可用于纯客户端数据。
您已经使用了jquery,这使得设置cookie非常容易。同样,我使用
click
事件,但可以在任何地方使用。然后在页面加载时,您可以像这样读取cookie:
在您的案例中,由于cookie在会话中持续存在,您需要在完成任何需要处理的操作后立即取消设置cookie。您不希望用户一天后回来,仍然有
clicked
设置为true。(此处可以找到设置/读取cookie的非jquery方式)
我个人不会将cookie用于记住单击状态这样简单的事情,但是如果查询字符串不是一个选项,并且您需要支持不支持会话存储的非常旧的浏览器,那么这将起作用。您应该首先通过检查sessionstorage来实现这一点,并且只有当检查失败时,才使用cookie方法。
window.name
虽然对我来说这似乎是一种可能起源于localstorage/sessionstorage之前的黑客攻击,但您可以将信息存储在
window.name
财产:它只能存储字符串,因此如果要保存对象,必须像上面一样对其进行字符串化
localStorage
例子:主要区别在于,这些信息不仅在页面刷新中保留,而且在不同的域中也保留。但是,它仅限于您当前所在的选项卡。
这意味着您可以在页面上保存一些信息,只要用户停留在该选项卡中,您就可以访问相同的信息,即使他浏览了另一个网站并返回。一般来说,我建议不要使用它,除非您需要在单个浏览会话期间实际存储跨域信息。
b4lqfgs42#
利用
$.holdReady()
,history
```function show() {
return $("form input[type=hidden]")
.replaceWith(function(i, el) {
return ""
});
}
$.holdReady(true);
if (history.state !== null && history.state.clicked === true) {
// show hidden fields
// if
history.state.clicked === true
,// replace
input type=hidden
withinput type=text
show();
console.log(history);
$.holdReady(false);
$(document).ready(function() {
});
zaqlnxep3#
使用
localeStorage
或sessionStorage
似乎是最好的选择。拯救世界
clicked
全局作用域中的变量以以下方式存储它:vtwuwzda4#
你可以试试这个: