7

这可能是基本的，但我已经花了两天时间，阅读了无数的教程，但我仍然无法让它工作。简单地说，我试图完成一项基本任务只是为了看到它工作。我想向我的捐赠视图发送一个 ajax 调用。我看到它成功通过了，但我希望我的模板也会更新为“TRUE”，但它仍然是“FALSE”。我感谢任何帮助或建议。

我的jQuery ...

$.ajax({
    type: "POST",
    url:"/donate/",
    data: {
    'test': 'success',
    },
    success: function(){
      alert('test')
     },
    error: function(){
        alert("Error");
});

这是我的看法...

def donate(request):
    if request.is_ajax():
        test = "TRUE"

    if request.method == 'POST':
        form = DonateForm(request.POST)
        if form.is_valid():
            form.save()
    else:
        form = DonateForm()
        test = "FALSE"

    return render_to_response('donate_form.html', {'form':form,'test':test}, context_instance=RequestContext(request))

我的模板包括这个...

<h1>{{ test }}</h1>

更新/解决方案

就像在这个问题的评论中提到的那样，我没有对返回的数据做任何事情。我将我的成功调用更新为以下内容并且它有效

    $.ajax({
    type: "POST",
    url:"/donate/",
    data: {
    'zip': zip,
    },
    success: function(data){            

        results = $(data).find('#results').html()               
        $("#id_date").replaceWith("<span>" + results + "</span >");

    },
    error: function(){
        alert("Error");
    },
4

3 回答 3

12

我认为问题在于您传递数据的位置。你用Firebug吗？一个很好的检查你是否传入任何东西POST的工具，一般来说它是一个很好的 web 开发工具。

这是一个从表单发送 Ajax 调用的工作示例

$("#form").submit(function(event) {
        var $form = $(this),
        $inputs = $form.find("input, select, button, textarea"),
        serializedData = $form.serialize();

        $.ajax({
            url: "/donate/",
            type: "post",
            data: serializeData,
            success: function(response) {
                alert(response)
            }
        })
        event.preventDefault();
    });

然后你的视图看起来像这样

if request.is_ajax() or request.method == 'POST':
        form = DonateForm(data=request.POST)
        if form.is_valid():
            return HttpResponse("Success")
        else:
            return HttpResponse("Fail")

顺便说一句，除非你真的需要$.ajax()我建议你使用的所有额外功能，否则$.post()它看起来更直接使用。

于 2012-04-29T09:03:05.303 回答
3

我认为您的代码很少有问题...

  1. 您在没有 csrf_token 的情况下向 django 发送 POST 请求 => django 不会为此请求返回成功。您需要使用 POST 请求发送 csrf_token。检查萤火虫。

  2. 即使 django 没有给出任何错误，那么您也不会在任何地方更改页面的内容（在浏览器上）...... djang 会发回这个字符串 - >“成功”......就是这样。

您需要像这样更改代码，

将 'django.core.context_processors.csrf' 添加到 settings.py 中的 TEMPLATE_CONTEXT_PROCESSORS 以访问所有模板中的 csrf 令牌。

您当前的模板：

<html>
    <script type="text/javascript">
    $("#form").submit(function(e) {
        e.preventDefault();
        serializedData = $("#form").serialize();

        $.ajax({
           url: "/donate/",
           type: "post",
           data: serializeData,
           cache: 'false',
           dataType: "json",
           async: 'true',

           success: function(data) {
               alert(data)
           },
           error:function(data) {
               alert("error in getting from server")
           },
        });
    });  
    </script>
    <body>
        <form id="form">
            {% csrf_token %}
            {% for field in form %}
                {{ field }}
            {% endfor %}
        </form>
    <body>
</html>

捐赠观点：

def donate(request):
    if request.method == 'POST':
        form = DonateForm(data=request.POST)
        if form.is_valid():
            form.save()
            return HttpResponse("SuccessFully Saved")
        else:
            return HttpResponse("Error in saving")

现在，您将看到：

  • SuccessFully Saved -> 如果成功保存数据。
  • 保存时出错 -> 如果由于某种原因未保存数据。
  • 从服务器获取错误 -> 如果服务器响应一些错误。
于 2012-04-30T00:48:25.887 回答
0

该request.is_ajax()测试检查 HTTP_X_REQUESTED_WITH 标头是否存在，JQuery 在发送您的请求之前应该设置它。（如果您手动使用 XMLHttpRequest，您也必须手动添加该标头。）我个人喜欢采用不同的路线，因为它更容易测试并且不依赖 HTTP 标头：向 URL 添加查询参数，例如 '?类型=ajax'。

然后，您将更request.is_ajax()改为request.GET.get('type', null) == 'ajax'并在您的 JavaScript 中更改url:"/donate/"为url:"/donate/?type=ajax".

这种方法的好处是您可以在不使用 AJAX 的情况下测试这些调用，只需将该?type=ajax字符串添加到任何请求中即可。

于 2012-04-29T04:40:12.523 回答