如何将 Javascript 函数返回的值传递给 django 中的 url？

Question

我正在使用 Google 在 django 模板中放置自动完成功能。我有一个搜索栏，它将显示对地点的预测。当用户单击搜索按钮时，我想将搜索栏中的值传递给 django URL。

下面是代码

<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">

<a href="{% url 'filteredcars' city  %}" id= "output">Search</a> 

<script>
    function init() {
        var input = document.getElementById('locationTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function f1() {
            var place = autocomplete.getPlace();
            var city = place.address_components[0].short_name;
            document.getElementById("output").innerHTML = city;
        });
     }
    google.maps.event.addDomListener(window, 'load', init);
</script>

我能够获取 city 并将其显示在 HTML 页面中，但我无法将其作为参数传递到 URL .

有人可以给我任何建议吗？

Answer 1

与其为每个城市设置不同的 URL（即 /url/to/city1、/url/to/city2 等），更好的方法是设置一个 URL（即 /url/to/city) 并将 city 作为 GET 参数传递（即 /url/to/city/?name=city1）。不要让 GET（? 字符）让您气馁。它完全有效且完全 self-explanatory（即当资源 /url/to/city 被赋予 GET 参数 - 城市名称 -，比如 amsterdam，它将提供包含该城市的页面).

理论讲完了，让我们深入研究代码。

a 的 href 属性将为：

<a href="{% url 'filteredcars' %}" id= "output">Search</a>

在 script 和上面 init() 插入这个方便的函数（取自 here）：

function updateQueryStringParam(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '' + key + "=" + value + '');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

然后在下方 var city = ...插入：

output = document.getElementById("output");
output.href = updateQueryStringParam(output.href, 'name', city);
output.innerHTML = city;

现在，每次触发事件 place_changed 时，href 都会更新为这种格式：/url/to/city/?name=<value_entered>

通过这样做，您需要更新 urls.py 和 views.py 文件中的相关代码以处理额外的 GET 参数（不过不能更改太多；） .分享你的代码，如果你不知道如何。

如何将 Javascript 函数返回的值传递给 django 中的 url？

How to pass a value returned by Javascript function to a url in django?

javascript

django

google-places-api