javascript - 如何发送简单的ajax请求？

Question

请帮助发送ajax请求。

html:

<p><a id="test">Hello</a></p>

js:

$(function() {
  $("#test").click(function() {
    $.ajax({
        url: "/xhr_test/",
        type: 'POST',
        dataType:"html",
        data: {
            "phone": 1,
            "skype": 2,
            "other": 3,
        },
        error: function() {
            alert('Ошибка получения запроса');
        },
        success: function(data) {
            alert('ajax worked' + data);
        }
    }); 
  });
}); 

url.py:

url(r'^xhr_test/$', 'views.xhr_test', name='xhr_test'), 

views.py:

def xhr_test(request):
    if request.is_ajax():
        message = "Hello AJAX!"
    else:
        message = "Hello"
    return HttpResponse(message)    

我尝试在使用js发送邮件之前检查数据:

问题是提交表单后我收到消息“错误消息”。同时向浏览器控制台输出: POST http://localhost:8000/xhr_test/403(FORBIDDEN)

请帮助修复代码

Answer 1

您还需要在请求中发送 CSRF token 。

从您的 View 中，将 csrf token 传递给将生成网页的模板，然后通过您的 ajax 调用将该 csrf token 传回，以便 django 将您识别为有效的连接。

Javascript

$(function() {
  $("#test").click(function() {
    $.ajax({
        url: "/xhr_test",
        type: 'POST',
        dataType:"json",
        data: {
            "phone": 1,
            "skype": 2,
            "other": 3,
            "csrfmiddlewaretoken": '{{ csrf_token }}'
        },
        error: function() {
            alert('Ошибка получения запроса');
        },
        success: function(data) {
            alert('ajax worked' + data);
        }
    }); 
  });
}); 

HTML 模板

{% csrf_token %}
<p><a id="test">Hello</a></p>

views.py

def xhr_test(request):
    if request.is_ajax():
        phone = request.POST['phone']
    data_to_send = {}
    data_to_send.update({'data':phone})
    return HttpResponse(simplejson.dumps(data_to_send),content_type="application/json")