javascript - 使用 Django 的 Ajax 创建重复的内容
问题描述
我已经问过一个先前的问题,但答案还不够。我正在尝试使用 Ajax 更改下拉列表在 Django 模板中呈现图形。但这会在 UI 中创建重复的内容。我不确定为什么会这样。这是我的代码
Django 视图
def home(request):
if request.method=='POST':
year = request.POST['year']
df, cus_dict = generate_df(year)
year_choro = createStormDataGraph(year, cus_dict)
context = {'graph': year_choro, 'year': year}
return render(request, 'index.html', context=context)
default1 = default()
context = {'default': default1}
return render(request, 'index.html', context=context)
def ajax(request):
return render(request, 'ajax.html')
主页模板
<form action="{% url 'home' %}" method='post' class='center' id='year-form'>
{% csrf_token %}
<div class="line-break"></div>
<select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
name="year" id='dropdown-btn'>
<option value="none" selected disabled hidden>
Select a year
</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</form>
<div id="message"></div>
<div class="graph center" id='graph'>
</div>
ajax 模板
<body>
{% if graph %}
{{ graph.0|safe }}
{% else %}
no graph was provided
{% endif %}
</body>
javascript
<script type="text/javascript">
$('#dropdown-btn').on('change', function () {
var frm = $('#year-form');
$.ajax({
type: frm.attr('method'),
url: "{% url 'home' %}",
data: frm.serialize(),
success: function (data) {
console.log('success')
$(graph).html(data)
},
error: function (data) {
$("#message").html("Something went wrong!");
}
});
});
</script>
解决方案
推荐阅读
- docker - Docker 由 nginx、express、letsencrypt SSL 组成 502 Bad gateway
- docker - Vue UI 无法通过 docker-compose
- laravel - “找不到类 'App\Game\User'”即使更改了提供程序
- javascript - 构建一个忽略空格的动态正则表达式
- bash - 使用 CURL 将特殊字符作为 HTTP POST 传递
- ruby-on-rails - 无法让用户确认使用设计在生产中工作
- javascript - 在 html 中如何将 div 类内容(文本)传递给另一个类或 id?
- node.js - 如何获取对象在数组中的位置?
- angular - 同步 Angular 任务
- swift - swift函数动态应用参数