Ajax无法将用户地理位置城市数据存入Django数据库

现存代码的明确错误点 #

• 前端脚本层错误
  1. 元素选择器不匹配：$("city") 会匹配标签名为city的HTML元素，实际需要选中的是id为city的span节点，正确选择器应为$("#city")
  2. 事件绑定存在语法硬错误：原代码中function)(){ 属于非法JS语法，会直接导致脚本执行中断；且span标签本身无原生交互触发的change事件，原绑定逻辑的触发条件永远无法满足，存储请求根本不会发出
  3. 传输值硬编码错误：原代码中const city = 'city' 是固定传字符串"city"，未使用从地理位置接口拿到的真实城市值
  4. AJAX配置语法错误：原代码中success.function(data) 为非法配置，正确写法应为success: function(data)，语法错误会直接中断脚本执行
  5. 脚本依赖加载顺序错误：自定义业务脚本写在jQuery引入代码的前面，脚本执行时全局$ 变量未定义，所有jQuery逻辑无法运行
• 后端视图层错误
  1. 对字符串调用模型方法：request.GET.get('city') 获取到的是字符串类型数据，字符串不存在.save() 方法，调用直接抛出服务端错误
  2. 未关联对应用户的Profile实例：未根据当前请求找到匹配的Profile模型对象，未将获取到的城市值赋值给模型的city字段，未完成真正的数据库写入操作
  3. 无请求合法性校验：未对请求方法、请求参数做基本判断，存在被非预期请求触发数据修改的风险

修正后的参考实现 #

修正后的 views.py 代码 #

from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from .models import Profile

@login_required
def func(request):
    # 仅接收带有效城市参数的GET请求
    if request.method == "GET" and request.GET.get("city"):
        city_value = request.GET.get("city")
        # 获取/创建当前登录用户对应的Profile实例
        user_profile, _ = Profile.objects.get_or_create(user=request.user)
        user_profile.city = city_value
        user_profile.save()
        return JsonResponse({"status": "success", "message": "Updated"})
    return JsonResponse({"status": "fail", "message": "Invalid request"})

修正后的模板代码 #

<!-- 优先加载jQuery依赖，避免脚本引用报错 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>City: <span id="city"></span></div>

<script>
// 地理位置获取逻辑（原功能正常部分保留）
$.ajax({
  url: "https://geolocation-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function(location) {
    const detectedCity = location.city;
    // 把检测到的城市渲染到页面
    $('#city').html(detectedCity);
    // 拿到城市值后直接发起存储请求，无需等待用户额外操作
    $.ajax({
      url: "{% url 'mains:func' %}",
      data: {
        'city': detectedCity
      },
      success: function(res) {
        console.log(res.message);
      }
    });
  }
});
</script>

注意：如果项目开启了CSRF校验，需要在AJAX请求中带上CSRF Token，否则请求会被Django中间件拦截返回403错误。

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