Question

我从三天起就尝试过这个东西，但我没有得到我的错误。我想要的是，我希望用户从下拉菜单中选择选项并点击提交以查看结果在一张桌子里，是的，没有页面刷新。

截至目前，未调用ajax且表单正常提交。

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

＆＃13;

< 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>

＆＃13;

{% 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 %}

＆＃13;

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()

Answer 1

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

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

使用preventDefault（）方法阻止它正常提交。

django中的Ajax ..正常提交表单，不输入ajax

1 个答案: