使用 Django 表单执行 AJAX 调用

Question

我正在使用<form> 标签来制作搜索栏和submit 按钮。我希望我的submit 按钮既可以查询数据库又可以显示隐藏的<div>。隐藏的div 包含将显示结果的数据库。

我已经成功地能够查询数据库，并在提交时显示'div，但我的问题是让它们一起工作。目前，我必须关闭一个才能使另一个工作。 submit 按钮一起导致页面刷新，从而再次隐藏 div。有人告诉我拨打AJAX 电话可以解决问题，但需要代码帮助。更具体地说，AJAX 调用的正确语法以及我的 views.py 中是否缺少任何内容。

index.html:

<form method="GET" action="">
    <input type='text' name='q' value='{{ request.GET.q }}'></input>
    <input type='submit' onclick='showDiv()'></input>
</form>

（隐藏的）div：

<div id="hiddenDiv" style="display: none;">
<p>This is hidden search results<p>
</div>

views.py：

def index(request):
  var_1 = Products.objects.all()
  var_2 = request.GET.get("q")
  if var_2:
    var_1 = items.filter(
        Q(First__icontains=var_2) |
        Q(Last__icontains=var_2)
        )
  context = {'items': items,
  }
  return render(request, 'app/index.html', context)

损坏的 javascript（不知道如何移动查询字符串）：

$(document).ready(function(){
    $("form").submit(function(e){
        e.preventDefault(); //stop submit     

        $.ajax({ //insert AJAX
            type: "GET",
            url "app/index.html",  
            data: {
                'var_2': 'var_2'.val() //take querystring
            },
            success:function showDiv(){ //activate javascript
                document.getElementById("welcomeDiv").style.display = "block";
            }
        });
    });
});

Answer 1

你可以试试这个。

from django.http import HttpResponse
from django.template.loader import render_to_string

def search_query(request):
    var_1 = Products.objects.all()
    var_2 = request.GET.get("q")
    if var_2:
        items = items.filter(
         Q(First__icontains=var_2) |
         Q(Last__icontains=var_2)
        )
    response = render_to_string('templates/template_name.html', {'items': items})
return HttpResponse(response)

template_name.html

<table width='100%'>
<thead>
  <tr>
    <th>xxxxx</th>
    <th>YYYYY</th>
  </tr>
</thead>
<tbody>
  {% for item in items %}
  <tr>
    <td><b>{{ item.xxxx }}</b></td>
    <td><b>{{ item.yyyyyy }}</b></td>
    ......................
    .......................
  </tr>
  {% endfor %}
</tbody>
</table>

javascript.js

.........
.........
var search_query = $('#id_search_q').val();
$.ajax({ //insert AJAX
        type: "GET",
        url "api/search-query/",  
        data: {'q': search_query //take querystring
        },
        success:function(response){ //activate javascript
            $("#welcomeDiv").html(response)
        }

........
........

index.html

<form method="GET" action="">
    <input type='text' id='id_search_q' name='q' value='{{ request.GET.q }}'></input>
    <input type='submit' onclick='showDiv()'></input>
</form>

urls.py

url('^api/search-query/$', 'views.search_query', name='api_search_query')