views.py

Question

尚未找到解决方案。我实际上想通过ajax在本地加载页面，我不需要全部加载

Django代码

#views.py
def test(request):
    if request.POST:
        a = request.POST['a']
        b = request.POST['b']
        data = a + b
        return HttpResponse(data)
    return render(request, 'test.html')

html代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
{% load static %}
<script src="{% static 'js/csrf.js' %}"></script>
<form method="POST">
    {% csrf_token %}
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b">
    <input type="submit" value="提交" id='go'>
</form>
<script>
$(document).ready(function(){
    $("#go").submit(function(){
        var a = $("#a").val()
        var b = $("#b").val()
        $.ajax({
            type: "POST",
            url: 'test',
            data: {a: a, b:b, csrfmiddlewaretoken: '{{ csrf_token }}'},
            success:function(res){
                alert(res);
            },
        });
        return false;
    });
});
</script>

当我运行时，它会直接跳到“请求”，并且不会通过ajax发送。没有弹出警报抱歉，我没有注意一些细节，例如将'.ajax'更改为'$ .ajax'，该错误已通过调试进行了修改

您的回答对我很重要

Answer 1

首先，您应该在表单元素上调用.submit（）。第二件事是您正在调用异步运行的ajax函数。表单有可能在ajax函数获得响应之前就提交了。由于ajax是异步的，因此它不会停止表单的提交。

我建议您应该执行以下操作：

<form method="POST" id="myForm">
  {% csrf_token %}
  <input type="text" name="a" id="a">
  <input type="text" name="b" id="b">
  <input type="button" value="提交" id='go'>
</form>
<script>
$(document).ready(function(){
    $("#go").click(function(){
        var a = $("#a").val()
        var b = $("#b").val()
        $.ajax({
            type: "POST",
            url: 'test',
            data: {"a": a, "b":b, "csrfmiddlewaretoken": '{{ csrf_token }}'},
            dataType:"json"
            success:function(response){
                alert(response.data);
                //if you want to submit form after this then
                $("#myForm").submit();
            },
         });

    });
});

views.py

def test(request):
    if request.POST:
        a = request.POST['a']
        b = request.POST['b']
        data = a + b
        return HttpResponse(json.dumps({"data":data}), content_type="application/json")
    return render(request, 'test.html')

您可能会发现一些建议，建议在ajax函数中使用 async：false ，但我必须告诉您，此方法已被弃用，并且会导致不良的用户体验，因为它会挂起浏览器直到响应被获取，ajax完成。

Answer 2

第一个，想回答朋友。

我进行了一些更改，对“视图”进行了更改，并调整了“ ajax”。我想我现在将结合使用“ ajax”和“ django”来完成更多功能。

views.py

def test(request):
    if request.POST:
        a = request.POST['a']
        b = request.POST['b']
        data = a + b
        #return HttpResponse(json.dumps(data), content_type="application/json")
        return JsonResponse(data, safe=False)
    return render(request, 'test.html')

html

$(document).ready(function(){
    $("#go").click(function(){
        var a = $("#a").val()
        var b = $("#b").val()
        $.ajax({
            type: "POST",
            url: "{% url 'test' %}",
            data: {"a": a, "b":b, "csrfmiddlewaretoken": '{{ csrf_token }}'},
            dataType:"json",
            success:function(response){
                alert(response);                
            },
         });return false;

    });
});

正在运行。

我尝试django + ajax加载html，但是它们不起作用

2 个答案:

views.py

html