Django表单提交前用JS添加的数据未出现在POST中如何解决

核心问题是fetch属于异步请求，你的代码执行顺序不符合预期：

1. 点击按钮后先发起了经纬度API请求
2. 不等API返回结果，立刻执行了表单提交逻辑，此时两个隐藏输入框还未被赋值
3. 表单提交完成后，API才返回结果，此时才会执行then里的赋值逻辑，这也是你事后在控制台能看到输入框有值，但POST数据为空的原因。

将表单提交逻辑移动到fetch的回调末尾，确保经纬度写入输入框后再触发提交，同时补充默认提交行为拦截和异常处理。

修正后JS代码 #

const initiate_ride_form = document.querySelector("#initiate-ride-form");
if (initiate_ride_form != null) {
    document.querySelector("#start-ride-button").onclick = (e) => {
        // 阻止按钮默认提交行为，避免提前提交
        e.preventDefault();

        const origin = '20 W 34th St, New York, NY 10001';
        const destination = '1600 Pennsylvania Avenue NW, Washington, DC 20500';
        
        // 用encodeURIComponent处理地址，避免特殊字符导致请求异常
        fetch(`https://api.opencagedata.com/geocode/v1/json?q=${encodeURIComponent(origin)}&key=b45938af46624365b08b989268e79d5e`)
        .then(response => response.json())
        .then(data => {
            const longitude_origin = data.results[0].geometry.lng;
            const latitude_origin = data.results[0].geometry.lat;
            
            document.querySelector("#from_long").value = longitude_origin;
            document.querySelector("#from_lat").value = latitude_origin;

            // 赋值完成后再提交表单
            initiate_ride_form.submit();
        })
        .catch(err => {
            // 补充错误提示，避免API调用失败后用户无感知
            console.error('获取经纬度失败:', err);
            alert('地址解析失败，请重试');
        });
    }
}

额外优化建议 #

• 可以在点击按钮后添加加载状态，避免用户重复点击触发多次请求
• 经纬度写入输入框后可以加一步校验，确认值合法再提交
• 生产环境建议把API密钥放到后端请求，避免前端暴露导致额度被盗用

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