我有一个详细信息页面/spaces/<int:pk>/,未经身份验证的用户可以在其中输入表单数据.

提交表单后,此数据将附加到URL中,如下所示:

/spaces/<int:pk>/?product_id=1&start_date=2022-12-23&duration=1

然后,系统会提示用户登录或注册以继续.单击登录后,详细页面URL将作为下一个参数附加到登录URL.

/login/?next=/spaces/1/?product_id=14&start_date=2022-12-23&duration=1

但是,在登录并重定向回详细页后,URL如下所示:

/spaces/1/?product_id=14

这是因为URL在解析时被拆分为&,因此start_dateduration被视为单独的参数.

我能想到的唯一解决方案是重写LoginView.get_redirect_url并从self.request中附加每个参数.分开获取,但我不确定这是最好的方法.

我的目标是保留初始输入数据,以便用户在登录并重新登录到空间详细信息页面后不必再次输入它.出于转换的原因,我不想强制用户在输入初始表单数据之前登录.

编辑: 我使用的是在登录和注册按钮上设置href的Java脚本:

const onClick = () => {
  let prodId = document.getElementById('productId').value;
  let startDate = document.getElementById('startDate').value;
  let duration = document.getElementById('duration').value;
  const url = new URL(window.location.href);
  url.searchParams.set('product_id', prodId);
  url.searchParams.set('start_date', startDate);
  url.searchParams.set('duration', duration);
  window.history.replaceState(null, null, url);

  const queryString = window.location.search;
  document.getElementById('login').href = `{% url 'login' %}?next={{request.path}}${queryString}`;
  document.getElementById('register').href = `{% url 'register' %}?next={{request.path}}${queryString}`
}

推荐答案

您需要正确地对查询字符串(和路径)进行urlencode编码,因此:

const queryString = encodeURIComponent(window.location.search);
document.getElementById('login').href = `{% url 'login' %}?next={{ request.path|urlencode }}${queryString}`;
document.getElementById('register').href = `{% url 'register' %}?next={{ request.path|urlencode }}${queryString}

Javascript相关问答推荐

在Three JS中看不到补间不透明度更改效果

如何使onPaste事件与可拖动的HTML元素一起工作?

优化Google Sheet脚本以将下拉菜单和公式添加到多行

将内容大小设置为剩余可用空间,但如果需要,可在div上显示滚动条

对路由DOM嵌套路由作出react

如何在JAVASCRIPT中临时删除eventListener?

在VS代码上一次设置多个变量格式

如何为仅有数据可用的点显示X轴标签?

使用jQuery find()获取元素的属性

重新呈现-react -筛选数据过多

使用可配置项目创建网格

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

我如何才能获得价值观察家&对象&S的价值?

如何从图表中映射一组图表-js使用REACT

Node.js的Fetch()调用总是创建新的Express会话

如果用户的页面宽度低于某个阈值,如何使用js更改html页面中的css文件

try 使用Reaction路由V5渲染多个布局

如何使jQuery终端光标成为块,而不是下划线?

Jsyaml SafeDump打字支持

JS函数返回未定义的值,即使返回值有效