为什么我的 html 表单没有通过 ajax 将值返回给 views.py？答案

【问题标题】：Why is my html form not returning values to views.py through ajax?为什么我的 html 表单没有通过 ajax 将值返回给 views.py？
【发布时间】：2020-01-10 15:09:05
【问题描述】：

这是我的 html 脚本。基本上，当我单击提交按钮时，我试图将值（fruit_id 和 year_id）从 html 表单的下拉菜单中发送到我的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>

这是我的意见.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

我做错了什么？

【问题讨论】：

现在您在页面加载时获取输入值，我猜它们是空的。在buttonclickfunction 中定义fruit_id 和year_id，这样就可以得到更新的值。
您的视图返回 403 错误（禁止访问），因此您应该在服务器控制台中看到完整的错误跟踪。你还在你的 javascript 控制台中记录值，你在那里看到了什么？

标签： javascript html django ajax

【解决方案1】：

在您的按钮单击处理程序中，您引用了fruit_id 和year_id，但这些变量很可能在用户尚未做出下拉选择时被初始化，因此未定义。

尝试在提交时请求选定的下拉内容，而不是在页面呈现时。

【讨论】：

现在可以使用了。谢谢。您是否偶然知道为什么结果会打印两次？ Views.py 返回所需的表单值，但也再次返回 None。不过我已经接受了你的回答。
据我所见，它们很可能被打印了两次，因为您在表单本身上有一个提交操作，并且在按钮单击处理程序中有一个 AJAX 调用。这有效地导致您在views.py 中的方法被调用两次。