如何无需点击按钮将JavaScript获取的经纬度传递到Django视图

1 配置Django后端接收接口 #

首先在你的应用views.py中编写接收坐标的视图函数：

from django.http import JsonResponse
from django.views.decorators.http import require_POST

@require_POST
def save_user_location(request):
    # 解析前端传递的JSON格式参数
    import json
    data = json.loads(request.body)
    lat = data.get('lat')
    lng = data.get('lng')
    
    # 此处编写你的业务逻辑：存储到数据库、调用其他服务处理等
    # 示例：登录用户关联存储位置
    # if request.user.is_authenticated:
    #     UserLocation.objects.create(user=request.user, lat=lat, lng=lng)
    
    return JsonResponse({'status': 'success', 'msg': '位置处理完成'})

然后在应用的urls.py中配置路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他现有路由
    path('api/save-location/', views.save_user_location, name='save_user_location'),
]

2 前端JavaScript自动发送请求 #

不需要绑定按钮点击事件，直接在获取到经纬度的代码后追加请求逻辑，拿到坐标后会自动触发提交：

// 你现有获取坐标的代码
pos = {lat: position.coords.latitude, lng: position.coords.longitude,};

// 新增：自动发送请求到Django后端
// 先获取Django生成的CSRF Token用于校验
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

// 发送POST请求
fetch("{% url 'save_user_location' %}", {
    method: "POST",
    headers: {
        "X-CSRFToken": csrftoken,
        "Content-Type": "application/json",
    },
    body: JSON.stringify(pos)
})
.then(response => response.json())
.then(data => {
    // 可根据返回结果做后续处理
    console.log('位置提交结果：', data);
})
.catch(error => {
    console.error('位置提交失败：', error);
});

注意事项 #

• 如果是前后端分离部署，需要在Django端安装django-cors-headers配置跨域规则
• 建议添加用户拒绝位置授权的异常捕获逻辑，避免JS运行报错
• 如果你使用的是静态HTML没有走Django模板渲染，fetch的路径直接写完整接口地址即可，不需要使用Django的{% url %}模板标签

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