我对 Ajax 比较陌生，我仍在努力掌握所有概念。我试图查看一堆关于 Ajax-Django 表单提交的教程，其中大多数都需要 jQuery 表单，这对我来说似乎不是一种简单的处理表单提交的方法。我很难理解这个概念。
我正在尝试为用户注册、登录、帖子创建和评论编写一些基于 ajax 的表单提交。到目前为止，我还没有找到一种方法让我更容易理解 Ajax 方法的工作原理。
我真的很感激我在这方面能得到的任何帮助。
这是我到目前为止所尝试的。
change_pw.html
{% extends "base.html" %}
{% block title %}Change Password{% endblock %}
{% block head %}Change Password{% endblock %}
{% block content %}
{% include "modal_change_pw.html" %}
{% endblock %}
modal_change_pw.html
<div id="modalchangepw">
<ul style="margin:5px;">
<ul class="thumbnails" style="margin: 0 auto;background: white;">
<div class="thumbnail row-fluid" style="background: white; padding: 10px;width: 97%; -moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:3px 3px 5px 0px #ccc;-webkit-box-shadow:3px 3px 5px 0px #ccc;box-shadow:3px 3px 5px 0px #ccc;">
<br>
{% if not error == '' %}
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ error }}
</div>
{% endif %}
{% if not success == '' %}
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ success }}
</div>
{% endif %}
{% if messages %}
{% for message in messages %}
<div{% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>
<button type="button" class="close" data-dismiss="alert">×</button>
{{ message|safe }}
</div>
{% endfor %}
{% endif %}
<form id = 'changepw' enctype="multipart/form-data" method="post" action=".">
<p><label for="id_currentpw">Current Password:</label> <input type="password" name="currentpw" id="id_currentpw" /></p>
<p><label for="id_newpw1">New Password:</label> <input type="password" name="newpw1" id="id_newpw1" /></p>
<p><label for="id_newpw2">Re-enter New Password:</label> <input type="password" name="newpw2" id="id_newpw2" /></p>
<input class="btn btn-primary" type="submit" value="submit"/>
{% csrf_token %}
</form>
</div>
</ul>
</ul>
</div>
视图.py
def change_pw(request):
user=request.user
error=''
success=''
if request.method == 'POST':
form = ChangePw(request.POST)
if form.is_valid():
currentpw=form.cleaned_data['currentpw']
newpw1=form.cleaned_data['newpw1']
newpw2=form.cleaned_data['newpw2']
if currentpw and newpw1 and newpw2:
if user.check_password(currentpw):
if newpw1==newpw2:
user.set_password(newpw1)
user.save()
success='Password updated!!'
if request.is_ajax() :
messages.success(request, 'Password updated.')
return HttpResponseRedirect ('/changepw/')
else:
return HttpResponseRedirect ('/user/%s/' % user.username)
else:
error='New passwords do not match'
else:
error='Incorrect Current Password'
else:
error='Enter all Password fields to make any changes'
else:
form = ChangePw()
variables = RequestContext(request, {
'form':form,
'error':error,
'success':success
})
if request.is_ajax() :
return render_to_response('modal_change_pw.html', variables)
else:
return render_to_response('change_pw.html', variables)
表格.py
class ChangePw(forms.Form):
currentpw = forms.CharField(
label=u'Current Password',
required=False,
widget=forms.PasswordInput()
)
newpw1 = forms.CharField(
label=u'New Password',
required=False,
widget=forms.PasswordInput()
)
newpw2 = forms.CharField(
label=u'Re-enter New Password',
required=False,
widget=forms.PasswordInput()
)
jQuery
//Change PW
$('#changepw').live('submit', function(event) { // catch the form's submit event
event.preventDefault();
$.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..
$('#modalchangepw').html(response); // update the DIV
}
});
return false;
});
该代码现在似乎工作正常。但我的目标是以模态弹出方式处理这些表单，这样用户就不必离开他/她当前所在的页面。在模态弹出的情况下，我的表单似乎没有提交值。