Question

我有一个AJAX请求：

$('input#post').on('click', function(e) {

    e.preventDefault();

    data : {
        email: $('input#id_email').val(),
        password: $('input#id_password').val(),
    }

    $.ajax({
        type : 'POST',
        url  : '#',
        dataType: 'json',
        success: function(data){
            console.log(data);
        },
        error: function(){
            console.log('Something went wrong');
        }
    });
});

对应于以下视图：

def index(request, show_login=False):
    login_form = LoginForm()
    if request.method == 'POST':
        login_form = LoginForm(request.POST)
        if login_form.is_valid():
            email = request.POST.get("email", "")
            password = request.POST.get("password", "")

            user = authenticate(username=email, password=password)

            if user is not None:
                auth.login(request, user)
                return HttpResponse(json.dumps({'status': 'success'}), content_type="application/json")
            else:
                return redirect('/')
        else:
            login_form.add_error(None, "No user found!")
    return render(request, 'freelancestudent/general/index.html', {'login_form': login_form,
                                                                   'show_login': show_login})

表单的HTML：

      <form id="login" method="post" action="#">
            {% csrf_token %}
            {{login_form.as_p}}
        <input id="post" type="submit" value="Login" />
      </form>

假设用户使用正确的凭据登录，并且我想返回包含{'status': 'success'}的JSON转储。当它到达那个return语句时，它只是将我的浏览器视图中的页面更改为{'status': 'success'}的纯文本实现，我被告知这是预期的。

我的愿望是在成功回调中将返回的数据记录在控制台中，这样我就能用它做我想做的事情。我如何实现这一目标？

Answer 1

在检查我的请求是否实际上是 AJAX（感谢Alasdair）并发现他们没有将事件附加到表单提交而不是输入#s; s单击。这也没有用，所以我决定只使用<a>元素发帖。

     <form id="login" method="post" action="#">
            {% csrf_token %}
            {{login_form.as_p}}
          <a id="post" href="">post</a>
      </form>

使用略微编辑过的JS：

$('a#post').on('click', function(e) {

        e.preventDefault();

        data = {};
        data.email = $('input#id_email').val();
        data.password = $('input#id_password').val();

        $.ajax({
            type : 'POST',
            url  : '#',
            dataType: 'json',
            data: data,
            success: function(data){
                console.log(data);
                if(data['status'] === 'success'){
                    $('a.remodal-close').click();
                }
            },
            error: function(){
                console.log('Something went wrong');
            }
        });
    });

这解析了我的视图中的True AJAX请求，这意味着当我的JSON被返回时，它被捕获在成功函数中，这使我能够按照我的意图行事。

获得403错误？

我已经决定在这里附上这些信息，因为这个问题让我疯狂了一周的最佳时间，所以我将在这里汇总。如果您在连接CSRF令牌时遇到问题并且出现403错误，请查看this链接，但我已经听说过＆＃34;后续步骤＆＃34;没有必要。

总而言之，对您的CSRF令牌进行排序，使用<a>元素以表格形式发布，而不是<input>为了理智而进行调试，并根据您的生活情况进行调试它

Answer 2

您应该再次定义再次阅读有关Jquery和AJAX的文档/教程。甚至没有向服务器发送任何数据并且有错误的Jquery元素的选择器。

最适合初学者的是Tango with Django tutorial（在我看来）。

以下是详细示例。如果表单有效，我使用简单的HttpReponse {"success": "succes"}而不是您想要的"OK"。

AJAX：

$("#your_form_id").on("submit", function(e) {
    e.preventDefault();

    $.ajax({
        url: "/your_url/",
        method: "POST",
        data: $("#your_form_id").serialize(), // Serializing your form's data including CSRF
        success: function(result) {
            // Your codes after received data (result) from the server if any
            // For example:
            if (result != "OK") { // Form is not valid
                var obj = $.parseJSON(result) // Create an instance from JSON data

                // Do something with errors aka attr (attr returns name of field), obj[attr] returns value )
                for (attr in obj) {
                    // Blablabla
                }
            }
            else {
                // Do something if the form is valid ...

                // Unbind this function and enable submitting
                $("#your_form_id").unbind("submit");
                $("#your_form_id").submit();
            }
        },
        error: function(xhr, status, error) {
            console.log(error);
        }
    });
});

视图：

import json

from django.http import HttpResponse, JsonReponse

from your_app import the_form

# Create your views here

def name_of_your_function(request):
    if request.method == "POST":
        form = your_form(request.POST)
.
        if request.is_ajax():
            if form.is_valid():
                return HttpReponse("OK")
            else:
                return JsonResponse(json.dumps(form.erros), safe=False)
        else:
            # Do something with the valided form
    else:
        # Do semething if request is "GET"

AJAX Post没有成功使用Django

2 个答案:

AJAX：

视图：