如何使用AJAX＆jQuery发布一个django表单
我已经为django AJAX表单检查了大量的教程，但是它们中的每一个都告诉你一个这样做的方法，没有一个是简单的，我有点困惑，因为我从来没有使用过AJAX。
我有一个叫做“note”的模型，它是一个模型，在模板里我需要每次一个note元素发送stop（）信号（来自jQuery Sortables），Django更新对象。
我目前的代码：
views.py
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", }); }
当前的代码从模板中获取数据并将其打印在terminal中。 我不知道如何操纵这些数据。 我见过一些人通过jQuery的formspipe理数据发送到Django的数据。
我如何访问由AJAX发送的数据并更新注释对象？
既然你使用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>
您可以使用variables的名称访问POST请求上的数据，在您的情况下：
request.POST["noteid"] request.POST["phase"] request.POST["parent"] ... etc
request.POST对象是不可变的。 您应该将该值分配给一个variables，然后对其进行处理。
我build议你使用这个JQuery插件 ，这样你就可以编写普通的HTML表单，然后把它们升级到AJAX。 在你的代码中有$ .post的地方是很乏味的。
另外，使用Firebug上的networking视图（用于Firefox）或Google Chrome开发工具，以便查看AJAX调用发送的内容。
需要注意的是，将表单作为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">×</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>
使用包含标签加载剪切的页面加载，以便在打开模式时可用。
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; });
在这种情况下，使用.on（）函数就像.live（）一样，键是将提交事件绑定到button而不是文档。
由于其他答案可以工作，我更喜欢使用jQuery表单插件 。 它完全支持你想要的和更多。 post视图在Django部分照常处理，只是返回被replace的HTML。
在服务器端，您的django代码可以像处理其他表单提交一样处理AJAX文章。 例如，
views.py
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()命令之外，我还将request.is_ajax更改为request.is_ajax() ，这正是您想要的（如果使用request.is_ajax您的代码将只检查请求是否有一个名为is_ajax的方法，这显然是）。
大多数使用AJAX POST和Django表单的例子，包括官方的例子：
https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example
当ModelForm.clean()没有产生任何错误（ form_valid ）的时候没问题。 然而，他们并没有执行艰难的部分：通过AJAX响应JavaScript / DOM客户端翻译ModelForm错误。
我的可插入应用程序使用AJAX响应路由客户端视图模型自动显示基于类的视图AJAX ModelFormvalidation错误类似于他们将如何显示在传统的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模板引擎。
