django：在同一页面中接受输入并显示输出

Question

我对 django 很陌生，并且努力做一些非常简单的事情。 我有以下型号的ModelForm：

class Queries(models.Model):
    user_id=models.CharField(max_length=200)
    query=models.CharField(max_length=200)

我正在向用户展示一个简单的表单，这将有助于执行以下操作：

• 用户会问一个问题

• 将处理问题（将生成数据库查询 基于问题）

• 那么查询结果应该显示在表格的正下方 同一页。

这就是我的 views.py 的样子：

from django.http import HttpResponse
from django.shortcuts import get_object_or_404, render
from basicapp.models import QueryForm

def index(request):
    form=MyForm()
    real_form=form.getForm(request)
    response=form.response
    return render(request,'basicapp/index.html',{
        'form': real_form,
        'response':response,
    })
class MyForm:
    response=''
    def getForm(self,request):
        form = QueryForm(request.POST)
        if form.is_valid():
            response=form.cleaned_data['query']
            form.save()
        return form

现在我正在尝试简单的东西，我正在获取表单查询字段中的值并尝试将其发送回页面；到目前为止我失败了。 这是 index.html：

<form action=" " method="post">{% csrf_token %}
{{ form }}
<p>{{response}}</p>
<input type="submit" value="Submit" />
</form>

如果我能做到这一点，我认为查询内容不会那么困难。表单工作正常，数据正在保存在数据库中。提交表单后，无法在index.html 中检索到来自views.py 的response 字符串。你能帮忙吗？

编辑： 根据霍夫的回答在index.html 中尝试了以下操作：

<form id="myForm" action=" " method="get">{% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>
<div id="response">
</div>
<script language="JavaScript">
    $(document).ready(function() {
        $("#myForm").submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('GET'), 
                success: function(response) { // on success..
                    $("#response").html(response); // update the DIV
                }
            });
            return false;
        });
    });
</script>

仍然没有运气:(

Answer 1

<input type="text" name="query" />
<input type="submit" name="submit" value="Submit" />

您可以检查表单是否已提交（即是否为发布请求）：

if 'submit' in request.POST: #you could use 'query' instead of 'submit' too
    # do post related task
    # add context variables to render post output
    # add another context variable to indicate if it's a post
    # Example:
    context.update({'post_output': request.POST.get('query','')})
...
return render(request, 'index.html', context)

然后在模板中，检查上下文变量post_output是否存在，如果确实显示输出：

{% if post_output %}
    Output: {{ post_output }}
{% endif %}

---

简而言之，逻辑是：

1. 检查您的视图中是否存在相关的request.POST dict 键。
2. 如果key存在，那么就是post请求；添加发布相关的上下文变量并执行发布相关的任务。
3. 检查模板中是否有任何帖子相关的上下文变量可用，如果有，则显示帖子相关的输出。

如果您不想在发布后仅刷新页面时显示输出，请将 request 对象传递给模板并进行如下检查：

{% if request.POST.submit and post_output %}

Answer 2

views.py

def index(request):
    questions=None
    if request.GET.get('search'):
        search = request.GET.get('search')
        questions = Queries.objects.filter(query__icontains=search)

        name = request.GET.get('name')
        query = Queries.object.create(query=search, user_id=name)
        query.save()

    return render(request, 'basicapp/index.html',{
        'questions': questions,
    })

html

<form method="GET">
    Question: <input type="text" name="search"><br/>
    Name: <input type="text" name="name"><br/>
    <input type="submit" value="Submit" />
</form><br/><br/>


{% for question in questions %}
<p>{{question}}</p>
{% endfor %}

Answer 3

按照霍夫的回答...

将 URL 属性添加到 ajax 调用：

$(document).ready(function() {
    $("#myForm").submit(function() { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('GET'),
            url: '/URL-to-ajax-view/',
            success: function(response) { // on success..
                $("#response").html(response); // update the DIV
            }
        });
        return false;
    });
});

views.py 中的一些 ajax 处理程序：

# /URL-to-ajax-view/
def ajax_get_response(request):
    if request.method == "GET" and request.is_ajax:
        form = QueryForm(request.POST or None)
        if form.is_valid():
            form.save()
            return HttpResponse(form.response)  
    raise Http404

试过类似的方法吗？

Answer 4

您需要的是一个异步帖子 (ajax)，使用 jQuery 很容易，请参阅此答案以获得完整的解决方案：How to POST a django form with AJAX & jQuery