在 Django 模板中使用 javascript 变量

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23879733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:43:52  来源:igfitidea点击:

use javascript variable in django template

javascriptjquerydjangodjango-templates

提问by david Kartashyan

I have a custom template tag that retrieves a list of countries over a web call to SOAP service and populates html selecttag. Now I have another template tag that displays a list of choices for the given country and,obviously enough, it takes country name as an argument. So I can pass the country name to the second custom tag only after onchangeevent is triggered on html select tag and I have country name as a javascript variable chosen by user. How would I pass this value to the custom template tag? Here are my custom tags

我有一个自定义模板标记,它通过对 SOAP 服务的 Web 调用检索国家/地区列表并填充 html select标记。现在我有另一个模板标签,它显示给定国家/地区的选择列表,很明显,它以国家/地区名称作为参数。因此,只有在 html select 标签上触发onchange事件后,我才能将国家/地区名称传递给第二个自定义标签,并且我将国家/地区名称作为用户选择的 javascript 变量。我将如何将此值传递给自定义模板标记?这是我的自定义标签

from mezzanine import template
from suds.client import Client
register = template.Library()

@register.as_tag
def get_countries(*args):
    url = 'http://www.sendfromchina.com/shipfee/web_service?wsdl'
    client = Client(url)
    countries = client.service.getCountries()
    countries = map(lambda x: x._enName, countries)
    return countries

@register.as_tag
def get_available_carriers(weight,country,length,width,height):
    url = 'http://www.sendfromchina.com/shipfee/web_service?wsdl'
    client = Client(url)
    rates = client.service.getRates(weight,country,length,width,height)
    rates=map(lambda x: (x._shiptypecode, x._totalfee), rates)
    return rates

Here is my html selecttag

这是我的 html选择标签

<select id='countrylist' onchange="getOption(this)">
    {% get_countries as countries %}
    {% for country in countries %}
        <option>{{ country }}</option>
    {% endfor %}
<select>

And finally, here is my javascript

最后,这是我的 javascript

<script type="text/javascript">
function getOption(sel){
    var country = sel.value;
    {% get_available_carriers 1 country 10 10 10 as carriers %}
    console.log('{{ carriers }}')
}
</script>

I can't seem to pass countryjs variable to get_available_carrierstag

我似乎无法将国家js 变量传递给get_available_carriers标记

Any help is highly appreciated! Thanks

任何帮助表示高度赞赏!谢谢

采纳答案by dhana

You didn't pass the value from javascript function to django template tag. But in this case you can use ajax calls.

您没有将值从 javascript 函数传递给 django 模板标签。但在这种情况下,您可以使用 ajax 调用。

http://www.tangowithdjango.com/book/chapters/ajax.html

http://www.tangowithdjango.com/book/chapters/ajax.html

https://bradmontgomery.net/blog/2008/11/24/a-simple-django-example-with-ajax/

https://bradmontgomery.net/blog/2008/11/24/a-simple-django-example-with-ajax/

Update:

更新:

See this you can understand what's going on.

看到这里你就明白是怎么回事了。

How to pass javascript variable to django custom filter

如何将javascript变量传递给django自定义过滤器

Hope this is helpful idea.

希望这是有用的想法。

回答by Maxime Lorant

Django templates are build on the server side, at the generation of the page while JavaScript is executed on the client side, when it is needed. Thus, Django and Javascript can't share objects/data.

Django 模板构建在服务器端,在页面生成时,而 JavaScript 在客户端执行,当需要时。因此,Django 和 Javascript 不能共享对象/数据。

In your page, with the current Javascript, you will have something like:

在您的页面中,使用当前的 Javascript,您将拥有如下内容:

<script type="text/javascript">
function getOption(sel){
    var country = sel.value;
                                // Empty line due to the templatetag
    console.log('')
}
</script>

What you need is either generate the list in your view and return a carrierobject already constructed. With some luck, you might be able to use it in Javascript.

您需要的是在您的视图中生成列表并返回一个carrier已经构建的对象。运气好的话,您也许可以在 Javascript 中使用它。

The best way here is still to make an AJAX request to get this list:

这里最好的方法仍然是发出一个 AJAX 请求来获取这个列表:

def get_available_carriers(request, weight, country, length, width, height):
    url = 'http://www.sendfromchina.com/shipfee/web_service?wsdl'
    client = Client(url)
    rates = client.service.getRates(weight,country,length,width,height)
    rates=map(lambda x: (x._shiptypecode, x._totalfee), rates)

    return json.dumps(rates)

and the get it with jQuery (if you are using it):

并使用 jQuery 获取它(如果您正在使用它):

    $.get('{% url "get_available_carriers" 1 country 10 10 10 %}', function(data){
        console.log(data);
    });

Don't forget to define the URL pattern, with the get_available_carriersin my example.

不要忘记定义 URL 模式,get_available_carriers在我的例子中。