这是我的HTML脚本。基本上，当我单击“提交”按钮时，我试图从html表单的下拉菜单中将值（fruit_id和year_id）发送到views.py中的“ get_values”函数中。
{% load static %}
<html>
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<link href="{% static 'main.css' %}" rel="stylesheet" />
<link rel="shortcut icon" href="{% static 'images/favicon.ico' type='image/x-icon' %}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
</head>
<body>
<div class="s01">
<form action="get_values/" method="POST" id="post-form">{% csrf_token %}
<fieldset>
<legend>Fruits</legend>
</fieldset>
<div class="inner-form">
<div class="dropdown1">
<div class="select">
<select name="dropdown1" id="dropdown1">
<option value="" disabled selected>Fruit Type</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Lemon</option>
<option value="4">Banana</option>
</select>
</div>
</div>
<div class="dropdown2">
<div class="select">
<select name="dropdown2" id="dropdown2">
<option value="" disabled selected>Harvest year</option>
<option value="1">2020</option>
<option value="2">2019</option>
<option value="3">2018</option>
<option value="4">2017</option>
</select>
</div>
</div>
<div class="search">
<button onclick="buttonclick(); "class="searchbtn" type="submit">Search</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
var g_e = document.getElementById("dropdown1");
var fruit_id = g_e.options[g_e.selectedIndex].value;
var y_e = document.getElementById("dropdown2");
var year_id = y_e.options[y_e.selectedIndex].value;
function sendtoserver(values) {
$.ajax({
type: 'POST',
headers:{
"X-CSRFToken": csrftoken
},
data: {
fruit_id:values[1],
year_id:values[2]
},
url: '{% url 'get_values' %}',
success: function(data){
return (data);
}
});
}
function buttonclick() {
values = [fruit_id, year_id];
console.log (values)
sendtoserver(values);
}
</script>
</body>
</html>
这是我的views.py
from django.shortcuts import render
import os
def index(request):
return render(request, 'index.html')
def get_values(request):
if request.method == 'POST':
fruit_id = request.POST.get('fruit_id')
year_id = request.POST.get('year_id')
print(fruit_id)
print(year_id)
return render(request, 'filter_function.html')
这是我的cmd提示符下的输出。当Views.py应该从html表单打印值时返回None
[10/Jan/2020 15:27:47] "POST /trailer_filter/get_values/ HTTP/1.1" 403 2513
None
None
我究竟做错了什么？
最佳答案
在按钮单击处理程序中，您引用fruit_id和year_id，但是这些变量很可能在用户尚未选择下拉菜单时进行初始化，因此未定义。
尝试在提交而不是在页面呈现时请求选定的下拉内容。
关于javascript - 为什么我的HTML表单无法通过Ajax返回值到views.py？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59684297/