javascript - 在 django 模板中使用 javascript 变量

Question

我有一个自定义模板标记，它通过网络调用 SOAP 服务检索国家列表并填充 html select 标记。现在我有了另一个模板标签，它显示给定国家/地区的选项列表，很明显，它以国家/地区名称作为参数。因此，只有在 html 选择标记上触发 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

这是我的 html select 标签

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

最后，这是我的 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>

我似乎无法将 country js 变量传递给 get_available_carriers 标签

非常感谢任何帮助!谢谢

Answer 1

Django 模板是在服务器端构建的，在页面生成时，而 JavaScript 在需要时在客户端执行。 Thus, Django and Javascript can't share objects/data.

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

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

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

这里最好的方法仍然是发出 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)

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

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

不要忘记定义 URL 模式，在我的示例中使用 get_available_carriers。