Простой способ отправить формы Django с помощью Ajax jQuery
Я относительно новичок в 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>
views.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)
forms.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;
});
код, кажется, работает нормально сейчас. Но моя цель-обрабатывать эти формы в модальном всплывающем окне мода, так что пользователю не нужно покидать страницу, на которой он находится в настоящее время. В случае модального всплывающего окна моя форма, похоже, не отправляет значения.
2 ответов
на AJAX
концепция не сильно отличается от того, как работает общая форма представления. Идея AJAX заключается в том, чтобы отправлять (передавать) данные на сервер асинхронно.
как это работает?
с общей формой представления поток идет что-то вроде этого.
User submits a POST request
↓
Server Does the Data Processing
↓
Redirects to a Success or Failure Page
с ajax он работает очень похоже.
User Submits a form through AJAX
↓
AJAX sends the POST data to the server in the background and waits for a response
↓
Server does the Data Processing
↓
and sends a Response back to AJAX
↓
AJAX sends the response back to the same template where the request was initiated.
теперь давайте посмотрим на простой логин Ajax с django вид.
views.py
def ajax_login(request):
"""
This view logs a user in using the POST data.
"""
if request.method == 'POST':
data = {}
username = request.POST['username']
password = request.POST['password']
user = authenticate(username=username, password=password)
if (not user is None) and (user.is_active):
login(request, user)
# Set Session Expiry to 0 if user clicks "Remember Me"
if not request.POST.get('rem', None):
request.session.set_expiry(0)
data['success'] = "You have been successfully Logged In"
else:
data['error'] = "There was an error logging you in. Please Try again"
return HttpResponse(simplejson.dumps(data), mimetype="application/json")
в приведенном выше представлении мы выполнили обработку данных и отправили ответ JSON. Метод ajax будет выглядеть примерно так.
function ajaxLogin(){
var dataString = '&username=' + $('input[name=username]').val() +
'&password=' + $('input[name=password]').val() +
$.ajax({
type: "POST",
url: "/ajax_login/",
data: dataString,
success: function(data) {
alert(data);
}
});
return false;
}
здесь метод успеха получает данные обратно и alerts
его пользователю.
обновление
я вижу, что вы определили ajaxPwchange()
метод, но я действительно не вижу, чтобы вы его вызывали, и я думаю, что именно поэтому страница все еще обновляется. Вы можете связать the ajaxPwchange()
метод отправки кнопки onclick
событие следующим образом.
<input class="btn btn-primary" type="submit" value="submit" onclick="ajaxPwchange();" />
или свяжите его под document.ready
метод следующим образом:
$(document).ready(function(){
$('input.btn-primary').click(function(){
ajaxPwchange();
});
});
обновление 2
div исчезает, потому что вы меняете div html
до json
объект непосредственно в следующем коде.
success: function(response) { // on success..
$('#modalchangepw').html(response); // update the DIV
}
вы должны попробовать что-то вроде этого :
success: function(response) { // on success..
var jsonData = $.parseJSON(response);
$.each(response, function(){
$('#modalchangepw').append('<div class="message">' + $(this) + '</div>');
});
}
Я дам вам очень простой пример, чтобы вы могли понять концепцию, а затем использовать ту же концепцию, чтобы сделать то, что вы пытаетесь сделать.
Я бы начал с создания нормального вида в views.py
def MyAjaxView(request):
if request.is_ajax():
if request.method == 'GET':
# If it was a GET
print request.GET
elif request.method == 'POST':
# Here we can access the POST data
print request.POST
else:
doSomeOtherStuff()
return render_to_response('mytemplate.html', some_context_maybe, context_instance=RequestContext(request))
в зависимости от того, что вы уже используете или что вам разрешено использовать, вы назовете это с помощью javascript или библиотеки jQuery.
если у вас есть форма, которая выглядит так
<form id="myNameForm">
{% csrf_token %}
<input type="text" id="name" />
<input type="submit" value="submit" id="submitButton" />
</form>
теперь вы можете подключить это к функции ajax используя JavaScript, я буду использовать jQuery в качестве демонстрации, и я буду использовать метод jQuery ajax()
как это объясняет концепцию и переход к post()
не должно быть слишком сложно.
<script>
$('#submitButton').click(function(event){
event.preventDefault(); //so that we stop normal form submit.
$.ajax(
url: 'myViewUrl',
type: 'post',
dataType: 'json',
data: $('form#myNameForm').serialize(),
success: function(data) {
doStuffWithDataHere(data);
}
);
});
</script>
вы должны убедиться, что ваш urls.py
есть сопоставление url для вашего нового представления.
Использование защиты CSRF также требует использования процессора CSRF, см. комментарий BurhanKhalids для документации.