如何用 AJAX 和 jQuery 发布 django 表单

我已经查阅了大量关于 django AJAX 表单的教程，但是每一个都告诉你一种方法，没有一个是简单的，我有点困惑，因为我从来没有使用过 AJAX。

我有一个名为“ note”的模型，它是一个模型表单，在模板内部，每次 note 元素发送 stop ()信号(来自 jQuery Sortables)时，django 都会更新对象。

我现在的代码是:

视野，视野

def save_note(request, space_name):


"""
Saves the note content and position within the table.
"""
place = get_object_or_404(Space, url=space_name)
note_form = NoteForm(request.POST or None)


if request.method == "POST" and request.is_ajax:
msg = "The operation has been received correctly."
print request.POST


else:
msg = "GET petitions are not allowed for this view."


return HttpResponse(msg)

JavaScript:

function saveNote(noteObj) {
/*
saveNote(noteObj) - Saves the notes making an AJAX call to django. This
function is meant to be used with a Sortable 'stop' event.
Arguments: noteObj, note object.
*/
var noteID = noteObj.attr('id');


$.post("../save_note/", {
noteid: noteID,
phase: "Example phase",
parent: $('#' + noteID).parent('td').attr('id'),
title: $('#' + noteID + ' textarea').val(),
message: "Blablbla",
});
}

当前代码从模板中获取数据并在终端中打印出来。我不知道该怎么处理这些数据。我见过一些人通过 jquery 表单管理数据，将数据发送给 django。

如何访问由 AJAX 发送的数据并更新通知对象？

109397 次浏览
小开
最佳答案

既然你在使用 jQuery，为什么不使用下面的代码:

<script language="JavaScript">
$(document).ready(function() {
$('#YOUR_FORM').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#DIV_CONTAINING_FORM').html(response); // update the DIV
}
});
return false;
});
});
</script>

剪辑

正如评论中指出的那样，有时候上面的方法是行不通的，所以试试下面的方法:

<script type="text/javascript">
var frm = $('#FORM-ID');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
$("#SOME-DIV").html(data);
},
error: function(data) {
$("#MESSAGE-DIV").html("Something went wrong!");
}
});
return false;
});
</script>
小开

您可以使用变量的名称访问 POST 请求上的数据，在您的例子中是:

request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
... etc

POST 对象是不可变的。您应该将值赋给一个变量，然后对其进行操作。

我建议您使用 这个 JQuery 插件，这样您就可以编写普通的 HTML 表单，然后将它们“升级”为 AJAX。拥有 $。在你的代码中到处张贴是有点乏味的。

此外，使用 Firebug 的网络视图(Firefox)或 Google Chrome 的开发工具(Developer Tools) ，这样你就可以查看 AJAX 调用发送的内容。

小开

在服务器端，django 代码可以像处理其他表单提交一样处理 AJAX 文章。比如说,

视野，视野

def save_note(request, space_name):


"""
Saves the note content and position within the table.
"""
place = get_object_or_404(Space, url=space_name)
note_form = NoteForm(request.POST or None)


if request.method == "POST" and request.is_ajax():
print request.POST
if note_form.is_valid():
note_form.save()
msg="AJAX submission saved"
else:
msg="AJAX post invalid"
else:
msg = "GET petitions are not allowed for this view."


return HttpResponse(msg)

我假设您的 NoteForm 是一个 ModelForm ——它应该是——所以它有一个 save 方法。请注意，除了添加 save()命令之外，我还将您的 request.is_ajax更改为 request.is_ajax()，这是您想要的(如果您使用 request.is_ajax，您的代码将只检查请求是否有一个名为 is_ajax的方法，显然它有)。

小开

由于其他答案确实有效，我更喜欢使用 JQuery 表单插件。它完全支持您想要的和更多。在 Django 部分中，post 视图的处理方式与往常一样，只是返回被替换的 HTML。

小开

需要注意的是，当将表单作为 HTML 片段返回到模态时。

Views.py

@require_http_methods(["POST"])
def login(request):
form = BasicLogInForm(request.POST)
if form.is_valid():
print "ITS VALID GO SOMEWHERE"
pass


return render(request, 'assess-beta/login-beta.html', {'loginform':form})

返回被剪切的 html 的简单视图

表格 html 剪切

<form class="login-form" action="/login_ajx" method="Post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="header">Authenticate</h4>
</div>
<div class="modal-body">
{%if form.non_field_errors %}<div class="alert alert-danger">\{\{ form.non_field_errors }}</div>{%endif%}
<div class="fieldWrapper form-group  has-feedback">
<label class="control-label" for="id_email">Email</label>
<input class="form-control" id="\{\{ form.email.id_for_label }}" type="text" name="\{\{ form.email.html_name }}" value="{%if form.email.value %}\{\{ form.email.value }}{%endif%}">
{%if form.email.errors %}<div class="alert alert-danger">\{\{ form.email.errors }}</div>{%endif%}
</div>
<div class="fieldWrapper form-group  has-feedback">
<label class="control-label" for="id_password">Password</label>
<input class="form-control" id="\{\{ form.password.id_for_label }}" type="password" name="\{\{ form.password.html_name}}" value="{%if form.password.value %}\{\{ form.password.value }}{%endif%}">
{%if form.password.errors %}<div class="alert alert-danger">\{\{ form.password.errors }}</div>{%endif%}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Sign in" class="btn btn-primary pull-right"/>
</div>
</form>

包含模式的页面

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog">{% include "assess-beta/login-beta.html" %}</div>

使用 include 标记加载页面加载中截断的内容，以便在打开模式时可以使用。

Modal.js

$(document).on('submit', '.login-form', function(){
$.ajax({
type: $(this).attr('method'),
url: this.action,
data: $(this).serialize(),
context: this,
success: function(data, status) {
$('#LoginModal').html(data);
}
});
return false;
});

使用。在这种情况下，类似于。Live ()键将提交事件绑定到文档而不是按钮。

小开

在 Django 表单中使用 AJAX POST 的大多数示例，包括官方示例:

Https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example

如果 ModelForm.clean()没有产生任何错误(form_valid) ，则表示没有问题。 但是，它们不执行困难的部分: 通过 AJAX 响应将 ModelForm错误转换为 Javascript/DOM 客户端。

我的可插拔应用程序使用带有客户端视图模型的 AJAX 响应路由来自动显示基于类的视图 AJAX 后 ModelForm验证错误，类似于它们在传统 HTTP POST 中的显示方式:

Https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing Https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html

Jinja2和 Django 模板引擎都受支持。


提交答案