Django：显示通过 ajax 调用 html 获得的数据

Question

我对 django 很陌生，正在努力做一些简单的事情。我正在使用数据可视化构建地图，我正在向用户展示一个简单的 svg-map，这将有助于执行以下操作： 1-用户将点击地图的其中一个区域。 将显示该特定选定区域的 2 数据可视化。

首先，我使用 Jquery、ajax 调用 python 发送区域名称（我从 svg 路径获得），这是我的 main.js：

$(document).ready(function(e) {
    $('path').on('focus', function(e) {
      e.preventDefault();
      $('#selection').html($(this).attr('name'));
      var gov = $('#selection').text();
      console.log(gov)
      var obj = { gov}
      $.ajax({
          type: 'POST',
          url: '/map/',
          contentType: 'application/json; charset=utf-8', //EDITED
          data: gov,
          success: function(data) {},
          error: function(rs, e) {
          }
      });
    });
  
  });    

然后，我将名称发送给 python，这就是 my views.py 的样子：

[views.py][1]

from django.shortcuts import render
import numpy as np
import pandas as pd
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.
@csrf_exempt
def map(request):
     if  request.method=='POST':
                data = request.body.decode("utf-8")
                gover=str(data)
                print(gover)
                df = pd.read_csv('https://raw.githubusercontent.com/-/datandvi/main/ndvid.csv', 
                encoding='utf-8',na_values=None)
                d = df[(df['Date'] >= '1984-01-01') & (df['Date'] <= '1985-01-01') & (df['Province'] ==gover )]
                print(d)   
                datadate = d[['Date']].values.tolist()
                dataplot = d[['Data_long_term_Average']].values.tolist()
                def numpy_flat(a):
                        return list(np.array(a).flat)
                k = numpy_flat(dataplot)
                k1 = numpy_flat(datadate) 
                context={ 'gover':gover,'k': k, 'k1': k1 }
                return render(request,'index.html',context)
     else:
                return render(request,'index.html')   

这里

每次我选择区域时，我想显示的数据都会打印在终端中 选择区域的数据被打印但不发送到 html 页面，上下文变量为 empty 。 你能帮忙吗？ here is my index.html

--urls.py

Answer 1

除非您添加模板，否则我无法提供确切的答案，但我可以帮助您清理一下代码。

试试下面告诉我：

main.js

$(document).ready(function(e) {
    $('path').on('focus', function(e) {
    e.preventDefault();
    $('#selection').html($(this).attr('name'));
    const gov = $('#selection').text();
    console.log(gov)
    let obj = gov
    
    $.ajax({
        type: 'POST',
        url: '/map/',
        contentType: 'json', // or try deleting this line 
        data: {
            'gov': gov
        },
        success: function(data) {
            console.log(data);
            console.log(data.gov);
            console.log(data.k);
        },
        error: function(data) {
            console.log('error', data)
        }
        });
    });
}); 

views.py

@csrf_exempt
def map(request):
 if  request.method=='POST':
    data = request.POST.get('gov')
    gover=str(data)
    print(gover) #this prints to your command prompt
    df = pd.read_csv('https://raw.githubusercontent.com/-/datandvi/main/ndvid.csv', 
    encoding='utf-8',na_values=None)
    d = df[(df['Date'] >= '1984-01-01') & (df['Date'] <= '1985-01-01') & (df['Province'] ==gover )]
    print(d)   
    datadate = d[['Date']].values.tolist()
    dataplot = d[['Data_long_term_Average']].values.tolist()
    def numpy_flat(a):
            return list(np.array(a).flat)
    k = numpy_flat(dataplot)
    k1 = numpy_flat(datadate) 
    data={ 
        'gover':gover,
        'k': k, 
        'k1': k1 
    }
    return JsonResponse(data, status=200)
return redirect('/index.html/')     

Answer 2

我认为您应该查看 THIS 博客以了解使用 AJAX 的 CRUD 操作。