如何使用AJAX和jQuery发布django表单
如何使用AJAX和jQuery发布django表单
提问于 2011-09-07 22:39:38
我查阅了大量的django AJAX表单教程，但每个教程都告诉您一种方法，没有一个是简单的，我有点困惑，因为我从来没有使用过AJAX。
我有一个名为" note“的模型，一个用于它的模型形式，在这个模板中，我需要每当note元素发送stop()信号(来自jQuery可排序) 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",
});
}当前代码从模板中获取数据并将其打印在终端中。我不知道如何处理这些数据。我见过一些人通过jqueryforms来管理数据，以便将数据发送到django。
如何访问AJAX发送的数据并更新note对象？
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-09-07 23:36:59
既然您使用的是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>Stack Overflow用户
发布于 2011-09-08 00:15:00
您可以使用变量的名称访问POST请求上的数据，在本例中：
request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
... etcrequest.POST对象是不可变的。您应该将该值赋给一个变量，然后对其进行操作。
我建议您使用this JQuery plugin，这样您就可以编写普通的HTML表单，然后将它们“升级”到AJAX。在你的代码中到处使用$.post是一件很乏味的事情。
此外，还可以使用Firebug上的Network视图(针对Firefox)或Google Chrome的开发人员工具，这样您就可以查看AJAX调用发送的内容。
Stack Overflow用户
发布于 2014-06-28 11:36:00
需要注意的是，当将表单作为剪切为模式的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>使用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;
});在本例中，使用.on()类似于.live()，关键是将提交事件绑定到文档而不是按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7335780
复制相关文章
相似问题