Ajax提交注册码后，如何实现验证成功跳转新页面、失败显示错误？

你遇到的问题核心在于Ajax请求的响应处理逻辑：浏览器不会把Ajax返回的重定向指令当作页面跳转信号，而是会把重定向后的页面内容直接返回给Ajax，然后插入到你指定的regCodeTarget容器里。这是因为Ajax是异步请求，响应完全由JavaScript处理，而非浏览器的原生页面导航系统。

要实现「成功跳转、失败显示错误」的逻辑，我们需要让前后端配合，明确区分响应类型，再由前端决定后续操作。下面提供两种可行的解决方案：

方案1：用JSON通信（推荐，更规范） #

这种方式让后端返回结构化的JSON数据，前端根据数据内容判断是跳转还是显示错误，是前后端交互的标准做法。

第一步：修改控制器代码 #

把原来直接返回重定向或DIV的逻辑，改成返回JSON格式的响应：

def reg_key_entry():
    key_exists = not db(db.regKeys.regKey == request.vars.regCode).isempty()
    if key_exists:
        db(db.regKeys.regKey == request.vars.regCode).delete()
        # 返回成功标记和跳转地址
        response.json = {
            "success": True,
            "redirect_url": URL('index')
        }
    else:
        # 返回失败标记和错误信息
        response.json = {
            "success": False,
            "error_msg": "INCORRECT PRODUCT KEY"
        }

（注：web2py中用response.json会自动设置正确的响应头，确保前端能识别为JSON格式）

第二步：修改前端Ajax逻辑 #

替换原来的ajax函数，让它能解析JSON响应并执行对应操作：

function checkRegCode() {
    const regCode = document.getElementById('regcode').value;
    const targetDiv = document.getElementById('regCodeTarget');
    
    // 清空之前的错误提示
    targetDiv.innerHTML = '';

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/your-app-name/controller-name/reg_key_entry', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            const result = JSON.parse(xhr.responseText);
            if (result.success) {
                // 注册码有效，跳转页面
                window.location.href = result.redirect_url;
            } else {
                // 注册码无效，显示错误提示
                targetDiv.innerHTML = `
                    <div style="color: white; border: solid 1px red; width: 160px; background-color: red; font-weight: bold; padding: 3px; border-radius:5px;">
                        ${result.error_msg}
                    </div>
                `;
            }
        }
    };
    
    // 发送请求数据
    xhr.send(`regCode=${encodeURIComponent(regCode)}`);
}

最后把输入框的内联事件改成：

<input id="regcode" maxlength="10" type="text" class="field" name="regCode" autocomplete="off" onkeyup="checkRegCode()" placeholder="Enter Product Key"/>

方案2：返回跳转脚本（快速临时方案） #

如果不想大改前端逻辑，可以让后端在验证成功时返回一段JavaScript代码，浏览器插入到regCodeTarget后会自动执行跳转：

修改控制器代码 #

def reg_key_entry():
    key_exists = not db(db.regKeys.regKey == request.vars.regCode).isempty()
    if key_exists:
        db(db.regKeys.regKey == request.vars.regCode).delete()
        # 返回触发跳转的JS脚本
        return f'<script>window.location.href="{URL("index")}";</script>'
    else:
        return DIV("INCORRECT PRODUCT KEY", _id="regCodeTarget", _style="color: white; border: solid 1px red; width: 160px; background-color: red; font-weight: bold; padding: 3px; border-radius:5px;")

这种方式不需要修改前端的ajax函数，就能直接触发页面跳转，但缺点是把业务逻辑混合在HTML/JS中，长期维护性不如JSON方案。

内容的提问来源于stack exchange，提问作者Percy Godiraone Leburu