javascript - 使用 Django Form 执行 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')