9

DjangoとAJAXの使用について説明している投稿やページがたくさんあります。私はこの1日ほどで何百も読んだことがあり、この質問に対する答えを探しています。簡単な概要：

例の5月は、次のようなハードコードされたURLを示しています。

$.post("/projects/create/", {"name" : name}, function(data) {...

または、URLテンプレートタグを使用するものもありますが、パラメータはありません。

$.post("{% url create_project %}", {"name" : name}, function(data) {...

ただし、URLにDjangoスタイルのパラメーターを含めたいと思います。これが私のURL定義です：

url(r'ajax/entity_name/(?P<pk>\w+)/$',EntityAjaxView.as_view(),name='entity_name'),

はい、クラスベースのビューを使用しています。これはDetailViewに基づいています。このビューは、デフォルトで、URLで提供されるpk値を探します。通常のテンプレートでは、次を使用します。

{% url entity_name id_number %}

リンクを提供します。私のコードでは、pk値の入力ボックスに入力された値を取得したいと思います。これが私のJavaScriptのスニペットです（これは機能しません）：

var id_number = $('#id_endowmententity_set-' + rownum + '-id_number').val()
$.ajax({
    type: "GET",
url: '{% url entity_name id_number %}',

だから、私の質問は、入力ボックスからの値でURLテンプレートタグを使用できますか？

（GETの代わりにPOSTを使用して、POSTデータでid_numberを渡すことができることは知っていますが、それはDetailViewではうまく機能しません。）

よろしくお願いします。

4

4 に答える 4

17

Djangoはサーバーサイドアプリケーションです。Javascriptはクライアントサイドです。Djangoテンプレートはサーバー上でレンダリングされるため{% url entity_name id_number %}、サーバー側で評価され、その値がクライアントに返されます。このため、Djangoテンプレートをjavascriptと組み合わせるのは不可能です。ただし、問題を解決するためにできることがいくつかあります。

ajax呼び出しを行っており、ajax呼び出しはユーザー入力に依存しているため、通常、クライアントが任意のタイプのユーザー入力をサーバーに送信するための最適なルートは、クエリ文字列（?URLの後に続くもの）を使用するか、送信することです。POSTデータ。したがって、最も簡単な方法は、URLを変更して、URLにを含めないようにすることpkですが、ビューがそれをGETまたはPOSTデータの一部として取得するようにすることです。

url(r'ajax/entity_name/$', EntityAjaxView.as_view(), name='entity_name'),

およびビュー（申し訳ありませんが、クラスベースのビューに精通していません）：

def entity_name(request):
    pk = request.GET.get('pk')
    ...

それが最もエレガントな解決策のように思えます。ただし、どうしてもクライアント側でURLを作成する必要がある場合は、サーバー側でテンプレートURLを生成してから、クライアント側で必要な部分を置き換えて完全なURLを取得できます。ただし、これにはより多くのメンテナンスが必要であるため、エラーが発生しやすくなります。このアプローチの簡単なjsの例：

var id_number = $('#id_endowmententity_set-' + rownum + '-id_number').val(),
    url = '{% url entity_name 0 %}'.replace('0', id_number);
$.ajax({
    type: "GET",
    url: url,
    ...
});
于 2012-11-12T04:43:35.627 に答える
3

属性を使用して選択している要素にAjaxURLを設定することが可能であり、DjangoURLのように動作します。重要なのは、JavascriptファイルのURLにアクセスすることもできるということです。よく使うHTML

<div class="card-body" id="js-products" data-url="{% url 'chart-data' %}">
    <div class="chart-area">
      <canvas id="testChart"></canvas>
    </div>
  </div>

注：親divJAVASCRIPTに設定されたdata-url属性

$(document).ready(function () {

var endpoint = $("#js-products").attr("data-url");
var defaultData = [];
var labels = []
$.ajax({
    method: 'GET',
    url: endpoint,
    success: function (data) {
        labels = data.labels
        defaultData = data.data_default
        setChart()


    },
    error: function (error_data) {
        console.log(error_data)
    }
})

function setChart() {
    var ctx = document.getElementById('testChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
            labels: labels,
            datasets: [{
                label: 'Monthly Performance',
                data: defaultData,

            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
 }
});

DJANGO VIEWS django restフレームワーククラスビューを使用していますが、関数またはクラスベースのビュークラスChartData（APIView）のいずれかを使用できます。

authentication_classes = []
permission_classes = []

def get(self, request, format=None):
    labels = ['Products', 'User', 'May']
    data_default = [SeedProduct.objects.all().count(),
                    User.objects.all().count(), 4]
    data = {
        'labels': labels,
        'data_default': data_default,
    }

    return Response(data)

DJANGO URLS：ビューからビュークラスをインポートします

path('api/chart/data', views.ChartData.as_view(), name="chart-data"),
于 2020-05-08T18:09:52.307 に答える
0

URLを取得するためだけにサーバーにラウンドトリップするのはかなり時間がかかります。URLをドライに保ち、これを回避するための最善の戦略は、DjangoのネイティブURLreverse関数をエミュレートするJavaScriptを生成し、そのコードを残りのクライアント側JSで静的に提供することです。

django-render-staticはまさにそれを行います。

于 2021-04-21T23:30:24.653 に答える
0

これは私のために働いた。私のURLは：

path('myurl/<str:type>', views.myfunction, name='myfunction')

私のviews.pyファイル：

def myfunction(request,type):
    return render(request, "payment.html", context)

私のテンプレートでは、次の方法で問題を解決しました。

<button type="button" class="btn"
    onclick="myfunction('forward');">My Button Name
</button>

<script>
function myfunction(type){
    let url = "{% url 'appName:myfunction' 'ok' %}".replace('ok', type);
    $.ajax({
      method: 'POST',
      url: url,
      data: {
          csrfmiddlewaretoken: '{{ csrf_token }}'
      }
  });
  }

</script>
于 2021-08-25T04:46:37.563 に答える