Question

我在django模板中使用Google Place Autocomplete。我有一个搜索栏，将显示地点的预测。当用户单击搜索按钮时，我想将搜索栏中的值传递给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

不是为每个城市设置不同的网址（例如setlocal /?，/url/to/city1等），更好的办法是拥有一个网址（即/url/to/city2）并传递{{ 1}}作为/url/to/city参数（即city）。不要让GET（/url/to/city/?name=city1字符）劝阻你。它是完全有效且非常不言自明的（即当资源GET被赋予?参数 - 城市名称 - 比如/url/to/city时，它将提供该城市的页面）。

足够理论，让我们深入研究代码。

GET的{{1}}属性将是：

amsterdam

内部a和上方 href插入此便捷功能（取自here）：

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

然后 script，插入：

init()

现在，每次触发事件function updateQueryStringParam(uri, key, value) { var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); var separator = uri.indexOf('?') !== -1 ? "&" : "?"; if (uri.match(re)) { return uri.replace(re, '$1' + key + "=" + value + '$2'); } 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>参数（尽管如此，不要改变太多）。如果您不知道如何分享您的代码。

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

1 个答案: