django中的ajax..正常提交表单，没有进入ajax答案

【问题标题】：Ajax in django.. Normal submission of form, not entering ajaxdjango中的ajax..正常提交表单，没有进入ajax
【发布时间】：2017-12-26 14:01:54
【问题描述】：

三天以来我一直在尝试这个东西，但我没有得到我的错误到底是什么。我想要的是，我希望用户从下拉列表中选择选项并单击提交以查看结果表，是的，没有页面刷新。

到目前为止，ajax 没有被调用，并且表单正在正常提交。

这是我的 JS 和 apply.html（JS 包含在同一个文件中）

< script src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"
type = "text/javascript" >
  $(document).ready(function() {
    $("#filter").click(function() {
      $.ajax({
        url: '/home/filter',
        type: 'GET',
        data: {
          mon: $('$mon').val(),
          year: $('$year').val(),
          place: $('place').val(),
        },
        x = JSON.stringify(data),
        contentType: "application/json;charset=utf-8",
        success: function(x) {
          alert('YOHOO!');
          console.log(data);
        },
        error: function(x) {
          console.log(err);
        }
      });
    });
  }); <
/script>

{% extends "base.html" %} {% block content %}

<div class="row">
  <!-- <div class="col-md-4"> -->

  <div class="form-group">
    <form action="{% url 'apply:filter' %}" method="GET" id="filter">
      {% csrf_token %}
      <table>
        <tr>
          <td style="padding-right:30px;">
            <select class="form-control" id="mon" name="mon">
                            <option value="1">Jan</option>
                            ...
                            <option value="12">Dec</option>
                        </select>
          </td>
          <td style="padding-right:30px;">
            <select class="form-control" id="year" name="year">
                            <option value="2017" selected="">2017</option>
                            ...
                            
                        </select>
          </td>
          <td style="padding-right:30px;">
            <select class="form-control" id="place" name="place">
                            <option value="India" selected>India</option>
                            ...
                            
                        </select>
          </td>
          <button name="action" value="Apply Filter" class="col-lg-2" style="display: inline-block; float:right"> Apply Filter </button>
      </table>
    </form>
  </div>
  <br>
  <br>


  <div class="panel">
    <div class="panel-body">
      <table>

        {% for emp in all_emp %}
        <tr>
          <th scope="row"> {{emp.emp_name}} </th>
        </tr>
        {% endfor %}
      </table>
      <div style="overflow-x:auto;">
        <table>
          <tr>
            {%for x in range %}
            <td></td>
            <td scope="col"> {{x}} </td>
            {% endfor %}
          </tr>
          <tr>
            {%for d in da %}
            <td></td>
            <td scope="col"> {{d}} </td>
            {% endfor %}
          </tr>
        </table>
      </div>

    </div>
  </div>

</div>



{% endblock %}

def filter(request):
mon = request.GET['mon']
year = request.GET['year']
place = request.GET['place']

all_emp= employees.objects.filter(emp_loc=place)
template = loader.get_template('apply/apply.html')

if request.GET['action'] == 'Apply Filter':

    x=monthrange(int(year), int(mon))
    d=['M', 'T', 'W', 'Th', 'F', 'S', 'Su']
    da=[]
    n=x[0]
    for i in range(0,x[1]):
        da.append(d[n%7])
        n=n+1

    context = {
        "all_emp" : all_emp,
        "da" : da,
        "range":range(1,x[1]+1)

    }

    return HttpResponse(template.render(context, request))
    da.clear()

【问题讨论】：

您是否收到错误消息？如果是的话是哪一个？我猜 AJAX 没有运行是因为你没有 CSRF cookie。浏览器控制台中应该有错误。并在视图中做一些打印语句。找出是否有什么东西正在发生。当您要验证表单时，应该是 if form is valid 部分并通过 JSON 获取数据，请在视图中执行 data = request.POST
到目前为止，我的控制台没有错误。并且由于数据没有进入 ajax，所有打印在视图中都可以正常工作。我需要在哪里添加 csrf 令牌以及如何添加？
您有一个带有 if/else 语句的 Ajax 调用。这两个选项都有一个console.log 行，所以控制台中必须有一些东西。您的数据正在通过（在success 上）并且将显示数据，或者您获得error 并且将显示错误。 $("#filter").click(function() { 这条线是在任何时候触发的吗？如果是，则必须有一个 console.log 语句。
就是这样..似乎它甚至没有进入脚本。没有错误，没有 console.logs 什么都没有.. :/
ok 把console.log 直接放在$("#filter").click... 下，如果它没有触发它没用寻找其他问题。您是否正确关闭了所有内容？ jQuery 加载了吗？点击是否会触发其他功能？

标签： javascript jquery html ajax django

【解决方案1】：

您没有更改表单的默认行为。尝试这样做

$(document).ready(function() {
    $("#filter").on('submit', function(e) {
      e.preventDefault();
       $.ajax({
        url: '/home/filter',
        type: 'GET',
        ...

使用 preventDefault() 方法阻止其正常提交。

【讨论】：