Question

<form id="searchform">
    {% csrf_token %}
    <div class="col-md-8">
        <input  type="text" id="question" class="form-control" placeholder="question......"
         name="question">
    </div>
    <div class="col-md-2">
        <input class="btn btn-primary" type="submit"  value="ASK">
    </div>
<form>

我有这个模板，并且发出ajax请求以获取要查看的数据

<script type="text/javascript">
$("document").ready(function(){
    $("#searchform").submit(function() {
        $.ajax({
            type: "POST",
            url : "results",
            data:{
                input:$("#question").val(),
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(data){
                $('#answer').html(data);
            }
        },"json");
    });
});
</script>

，视图在下面

def results(request):
    if request.method == "POST":
        resource = request.POST['input']
    return render(request, 'index.html',{"resource" : resource})

我在表单中总结的东西可以在url中看到。但是不会在模板中打印结果。这段代码中的问题是什么？提前感谢：）

Answer 1

在视图中返回JsonResponse对象：

from django.http import JsonResponse

def results(request):
    if request.method == "POST":
        resource = request.POST['input']
    return JsonResponse({"resource" : resource})

Answer 2

我看到你写这段代码的方式有几个问题。 Ajaxifying表单提交是微不足道的，可以非常优雅地完成。

让我根据您分享的代码进行解释。

首先，您的表单没有操作和方法。即使浏览器不支持javascript，正确定义的表单也应该有效。

您的某个表单表单字段没有name参数。

<form id="searchform" method="POST" action="{% url 'results' %}">
    {% csrf_token %}
    <div class="col-md-8">
        <input  type="text" id="question" name="input" class="form-control" placeholder="question......"
         name="question">
    </div>
    <div class="col-md-2">
        <input class="btn btn-primary" type="submit"  value="ASK">
    </div>
<form>

现在在您的javascript中您只需添加覆盖并阻止默认行为。这就是您的网页只更改网址的原因。

更通用的版本。看你不必形成数据有效载荷和其他有效载荷。

$(document).on('submit', "#searchform", function (event) {
  event.preventDefault();
  var ele = $(this);
  $.ajax({
    type: ele.attr("method"),
    url: ele.attr("action"),
    data: ele.serialize(),
    success: function (data) {
       $('#answer').html(data);
    }
  });
});

我认为您的观点没有问题。

Answer 3

您的表单是通过GET方法和GET参数（表单的默认行为）提交的。要解决此问题并使代码正常工作 - 只需阻止默认行为

$("#searchform").submit(function(event) {
    event.preventdefault();
    ...
}

django ajax请求不要获取数据

3 个答案: