从 html 或 javascript 到 python Django 的通信答案

【问题标题】：Communicating from html or javascript to python Django从 html 或 javascript 到 python Django 的通信
【发布时间】：2019-05-31 12:36:18
【问题描述】：

我已阅读所有帖子，但找不到适合我的程序的任何内容。我正在使用 mapbox js 框架，并希望将用户位置“位置”发送到我的 python 视图代码以将其存储在数据库中。当我在 js 代码中执行 console.log() 时，它不会打印任何内容。当我在 python 中打印时，它会打印“无”。我像其他帖子一样尝试了ajax，但似乎没有任何效果。也许我正在以错误的方式将数据从模板传递到 python 代码......请帮助

base.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">        </script>
</head>
</html>

home.html

{% extends "geotracker/base.html" %}
{% load static %}
{% block content %}
 <body>
  <div id='map' width='100%' style='height:400px'></div>
  <form id="myform" name="myform">
   {% csrf_token %}
   <input type="hidden" id="location" name="location"/>
 </form>
<script>

 mapboxgl.accessToken = 'mytoken';
 var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-96, 37.8], // starting position
  zoom: 3 // starting zoom
 });

 // Add geolocate control to the map.
 var geolocate = new mapboxgl.GeolocateControl();
 map.addControl(geolocate);

  geolocate.on('geolocate', function(e) {
  console.log('locating...');
  var lon = e.coords.longitude;
  var lat = e.coords.latitude
  var position = [lon, lat];
  var element = document.getElementById('location');
  element.innerHTML = position;

    $('#myform').submit(function (ev) {
    //ev.preventDefault();
    console.log('hello');
  });
  });
  </script>
 </body>
{% endblock %}

views.py

def home(request):

context = {
    "mclient": mclient
}
print("POST in view:\t%s" % request.POST.get('location'))

# get users location if authenticated
if request.user.is_authenticated:
    Fan.objects(user=str(request.user)).modify(set__currentPosition= 
 [0,0], image='http://localhost:8000/media/%s' % 
 request.user.profile.image, upsert=True)

return render(request, 'geotracker/home.html', context)

【问题讨论】：

你有什么console.log()？您是否尝试过查看 frm 和 frm.serilize() 中的内容以及 python print 中的内容，只是 request.POST？ PS 在你的ajax 我相信应该有一个url 字段？
console.log 与 js 中的 print 相同。 frm 是表格。 request.POST 是一个空的查询字典。问题是 ajax 和表单提交永远不会被触发，因为 console.log('submitting...') 永远不会执行。
好吧，我没仔细看。据我所知.submit 需要input 类型为submit，这意味着需要一个按钮，否则它只会留在那里试图监听提交。当您在geolocate.on 中执行此操作时，我将取出$('#myform').submit(fu 并直接在geolocate.on 中运行ajax 比较这两个，一个是带有按钮的，一个是没有的，但打开浏览器检查。 jsfiddle.net/mfv5eLow（带 btn）jsfiddle.net/mfv5eLow/1（不带 btn）希望我没有理解错误
您的编辑将.submit（来自我的示例）留在了直接调用ajax 的内部。 >..submit() 不应该在那里，sryz 我的英语很差
我用更改编辑了我的代码。即使我注释掉 preventDefault() 它仍然不会打印出“你好”。但是，如果我使用按钮执行版本，它将起作用，但这可能是因为输入提交类型正在处理事件而不是 jquery。有没有可能我没有正确的 jQuery？

标签： javascript jquery django templates

【解决方案1】：

我无法弄清楚 ajax jquery 语句，但我发现我可以使用普通的 AXAJ 来使用 XMLHttpRequest 发送 Post 请求。使用这种方法，我能够提交带有发布请求的表单，而无需刷新页面以从 Mapbox Api 获取用户位置。我只需要从 Django 的管理面板发送我的身份验证令牌，我可以从发送到我的模板的 python 变量中获取它。

geolocate.on('geolocate', function(e) {
  console.log('locating...');
  var lon = e.coords.longitude;
  var lat = e.coords.latitude
  var position = lon + " " + lat;
  var element = document.getElementById('location');
  element.value = position;
  var url = 'http://localhost:8000'
  var params = JSON.stringify({
      longitude: lon,
      latitude: lat
  });
// Create a new AJAX request object
var request = new XMLHttpRequest();
// Open a connection to the server
request.open('POST', url, true);
// Actually send the request
var csrftoken = '{{ csrf_token }}'
request.setRequestHeader("Content-type", "application/json");
request.setRequestHeader('X-CSRFToken', csrftoken);
request.send(params);
});

【讨论】：