从 Django 表单 AJAX 中获取 POST 数据答案

【问题标题】：Get POST data in django form AJAX from从 Django 表单 AJAX 中获取 POST 数据
【发布时间】：2012-05-30 11:21:36
【问题描述】：

我要在 Django 中从 AJAX 请求中获取参数，这就是我正在做的事情：

base.html：

<form method="POST">{% csrf_token %}
First name: <input type="text">
<input type="submit" value="Register" id="register">
</form>

main.js：

$(document).ready(function(){
    $("#register").live("click", function(e){
        $.post("/", {
            name: "MY TEXT",
        });
    });
});

views.py：

from django.shortcuts import render_to_response
from django.template import RequestContext
from django.core.context_processors import csrf

def home(request):
    if request.method == 'POST':
        print request.POST['name']
    return render_to_response('registration.html', {},
    context_instance=RequestContext(request))

是的，我知道此时我的 JS 没有从文本表单中获取真实数据，它只发送一个静态文本“MY TEXT”。但是当我按下按钮时，我得到 "MultiValueDictKeyError at / “在“”中找不到键“名称”

我做错了什么？

我更改了我的代码： main.js

$(document).ready(function(){
    $("#register").live("click", function(e){
        e.preventDefault();
        $.post("/", {
           name:'MY TEXT'
        });
    });
});

base.html:

<form method="POST">{% csrf_token %}
    First name: <input type="text" name="name">
    <br>
    <input type="submit" value="Register" id="register">
</form>

有效，谢谢！

不过，我有两个问题：

在这种情况下，我在哪里发送“MY TEXT”？我提到它从名称字段返回实际数据并且不返回“我的文本”
页面仍在重新加载。我想让它完全是 AJAX。我的意思是创建一个 python 函数来将来自 POST 请求的数据添加到 MySQL 数据库，并将操作结果返回给 AJAX-script。一切都无需重新加载页面。我该怎么做？

【问题讨论】：

标签： jquery ajax django forms

【解决方案1】：

发生的情况是您没有阻止浏览器的默认submit 操作发生。因此，您的 Ajax POST 已完成，但随后浏览器本身立即 POST - 而且，正如 Michal 指出的那样，您的表单不包含 name 字段，因此查找失败。

你需要做两件事来解决这个问题。首先，在你的 JS 点击方法中使用e.preventDefault();。其次，检查视图顶部的request.is_ajax()。

【讨论】：

谢谢，我已经编辑了原始主题。你能看一下吗？

【解决方案2】：

使用“e.preventDefault()”阻止表单提交。此外，最好绑定到表单以防用户按 Enter 而不是单击：

base.html

<form method="POST" id="register">{% csrf_token %}
First name: <input type="text">
<input type="submit" value="Register">
</form>

main.js

$(document).ready(function(){
    $("#register").live("submit", function(e){
        $.post("/", {
            name: "MY TEXT",
        });
        e.preventDefault();
    });
});

【讨论】：

【解决方案3】：

我猜问题是你没有在 html 中命名文本输入：

<input type="text" name="name">

【讨论】：

另外，我用两个问题编辑了原始主题。你能看一下吗？

【解决方案4】：

我觉得应该是

$.post("../save_note/", {
        data:'name=MY TEXT'
    });

还有

if 'name' in request.POST:

【讨论】：

【解决方案5】：

您可以设置一个更强大的表单提交函数来做同样的事情，而不是使用点击处理程序。返回 false 会取消默认提交行为。

$("form").submit(function() {
    $.post("/", {
        name: "MY TEXT",
    });

    return false;
});

【讨论】：

哦，我知道了，谢谢！这似乎是更胜任的代码:)