如何让history.pushstate()在实际网络场景中生效？以Straw Poll为例

嘿，你的思路完全找对方向了！Straw Poll这类投票平台的核心实现逻辑和你推测的基本一致，我来帮你把细节拆解清楚，顺便优化下你的实现思路：

1. 数据库与投票ID的生成 #

• 当用户提交创建投票的表单时，后端会在数据库的投票表中插入一条新记录，这条记录会包含投票标题、选项列表、过期时间（如果有的话）、创建时间等核心字段。
• 你看到的15147968就是这条记录的唯一自增主键ID——这类短数字ID比UUID更友好，用户更容易记住和分享，这也是Straw Poll选择它的原因。

2. 表单提交与页面跳转的正确姿势 #

你的AJAX思路没问题，但用window.location.hash拼接路径其实不太准确——Straw Poll的投票地址是路径参数（/投票ID），而非哈希值（#投票ID）。正确的流程应该是这样：

• 前端通过AJAX把表单数据（比如投票标题、选项数组）提交到后端的创建接口，比如POST /api/create-poll
• 后端成功插入数据库后，返回包含新投票ID的JSON响应，示例如下：

  {
    "success": true,
    "pollId": 15147968,
    "redirectUrl": "/15147968"
  }
  

• 前端拿到这个ID后，直接通过window.location.href = redirectUrl跳转到投票页面就可以了，完全不需要用哈希。

3. 值得注意的细节优化 #

• 防止重复提交：用户点击提交按钮后，立刻禁用按钮或者添加加载状态（比如按钮变成“创建中...”），避免多次点击导致数据库插入重复投票。
• ID的可选优化：如果担心自增ID被恶意遍历（比如有人批量爬取所有投票），可以给ID做个简单混淆（比如乘以一个固定质数再取模），或者用短UUID生成更难猜测的ID——不过Straw Poll本身是公开投票平台，所以没做这个处理。
• 前后端双重验证：前端先验证必填字段（比如标题不能为空、选项至少2个），后端也要二次验证，避免脏数据进入数据库。

内容的提问来源于stack exchange，提问作者Janice Zhong