web-dev-qa-db-ja.com

Djangoテンプレートでjavascript変数を使用する

SOAPサービスへのWeb呼び出しを介して国のリストを取得し、html selectタグにデータを入力するカスタムテンプレートタグがあります。これで、を表示する別のテンプレートタグがあります。指定された国の選択肢のリストであり、もちろん、国名を引数として使用します。したがって、html selectタグでonchangeイベントがトリガーされた後でのみ、国名を2番目のカスタムタグに渡すことができます。ユーザーが選択した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タグに渡せないようです

どんな助けでも大歓迎です！ありがとう

javascriptjquerydjangodjango-templates
13
david Kartashyan

Javascript関数からDjangoテンプレートタグに値を渡さなかった。ただし、この場合、ajax呼び出しを使用できます。

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

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

更新：

これを見て、何が起こっているのかを理解することができます。

javascript変数をDjangoカスタムフィルター に渡す方法

これがお役に立てば幸いです。

3
dhana

Djangoテンプレートは、ページの生成時にサーバー側で構築され、JavaScriptは必要に応じてクライアント側で実行されます。 したがって、DjangoおよびJavascriptはオブジェクト/データを共有できません。

あなたのページでは、現在のJavascriptを使用すると、次のようになります。

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

必要なのは、ビューでリストを生成し、すでに作成されている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);
    });

私の例ではget_available_carriersを使用して、URLパターンを定義することを忘れないでください。

5
Maxime Lorant