私は 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;
});
コードは現在正常に動作しているようです。しかし、私の目的は、これらのフォームをモーダル ポップアップ方式で処理して、ユーザーが現在表示しているページを離れる必要がないようにすることです。モーダル ポップアップの場合、フォームが値を送信していないようです。