- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 Ajax 比较陌生,并且仍在努力掌握所有概念。我尝试研究了一堆有关 Ajax-Django 表单提交的教程,其中大多数都需要 jQuery 表单,这对我来说似乎不是处理表单提交的简单方法。我很难理解这个概念。
我正在尝试编写一些基于ajax的表单提交,用于用户注册、登录、帖子创建和评论。到目前为止,我还没有找到一种方法可以让我更轻松地理解 Ajax 方法的工作原理。
我非常感谢在这方面能得到的任何帮助。
这是我到目前为止所尝试过的。
{% extends "base.html" %}
{% block title %}Change Password{% endblock %}
{% block head %}Change Password{% endblock %}
{% block content %}
{% include "modal_change_pw.html" %}
{% endblock %}
<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>
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)
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()
)
//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;
});
代码现在看起来工作正常。但我的目标是以模式弹出方式处理这些表单,以便用户不必离开他/她当前所在的页面。在模态弹出窗口的情况下,我的表单似乎没有提交值。
最佳答案
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.
现在让我们看一下带有 django View 的简单 Ajax 登录。
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")
在上面的 View 中,我们进行了数据处理并发回了 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;
}
在这里,success 方法接收返回的数据并向用户警告
。
我看到您已经定义了 ajaxPwchange()
方法,但我并没有真正看到您在任何地方调用它,我认为这就是页面仍然刷新的原因。您可以绑定(bind)ajaxPwchange()
方法来提交按钮的onclick
事件,如下所示。
<input class="btn btn-primary" type="submit" value="submit" onclick="ajaxPwchange();" />
或者在document.ready
方法下绑定(bind)它,如下:
$(document).ready(function(){
$('input.btn-primary').click(function(){
ajaxPwchange();
});
});
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>');
});
}
关于jquery - 使用 Ajax jQuery 提交 Django 表单的简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14099038/
我对 Python-Django 和 web 开发还很陌生,我被困在这个使用 POST 创建新资源的特殊问题上。 我正在为 REST API 使用 Django REST 框架,我正在尝试创建一个新资
我已经使用 Django-storages 成功地将 Word 文档存储到 S3。 class Document(TitleSlugDescriptionModel, TimeStampedModel
我有 2 个关于模型代理的问题, 如何从模型对象创建代理对象? 如何从模型查询集创建代理查询集? 例如,假设我们定义了: from django.contrib.auth.models import
我想编写一个直接执行 HTTP 请求的单元测试(而不是使用 django.test.client.Client)。 如果您好奇为什么 - 那是因为我想测试我从 Django 应用程序公开的 Thrif
我为我的个人网站启动了一个 django 项目来学习 django。到目前为止,我已经将我的开发环境设置为我需要的一切,并遵循 this很棒的教程来创建一些基本的数据结构和模板。现在我想开始使用我之前
我已经阅读了很多关于如何在使用 Django 注册时添加额外字段的信息,例如 here 、 here 和 here 。代码片段是: forms.py(来自注册应用程序) class Registrat
我正在编写小型社交应用程序。功能之一是在网站标题中写入用户名。因此,例如,如果我登录并且我的名字是Oleg(用户名),那么我应该看到: Hello, Oleg | Click to edit prof
我有一个使用 Django 和 Django Rest 框架开发的应用程序。我想将 django-reversion 功能添加到我的应用程序中。 我已经尝试过http://django-reversi
我有一个简单的 HTML 表单,我没有使用 Django 表单,但现在我想添加一个选择。 选择最容易创建为 Django ChoiceField (与通过循环等手动创建选择相反),但是,如果没有在 D
我不明白为什么人们以两种方式编写外键,这样做的目的是什么?它们是相同还是不同? 我注意到有些人这样写: author = models.ForeignKey(Author, on_delete=mod
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
这对于 Django 1.2 仍然有效吗? Custom Filter in Django Admin on Django 1.3 or below 我已经尝试过,但管理类中的 list_filter
问题在于,当 django-compressor 编译为 .js 文件的 CoffeeScript 文件中引用 {{ STATIC_URL }} 时,它无法正确加载。 在我的 django 模板中,我
我正在尝试将一些字段从一个 django 模型移动到一个新模型。假设我有一个书籍模型: class Book(models.Model): title = models.CharField(max
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
目前我正在寻找在 Django 中实现访问控制。我已经阅读了有关内置权限的内容,但它并不关心每个对象的基础。例如,我想要“只有创建者可以删除自己的项目”之类的权限。所以我读到了 django-guar
嗨,我正在将我的 Django 模型的一个字段的值设置为其他模型的另一个字段的值。这个值应该是动态变化的。 这是我的第一个模型 class MainModel(AbstractBaseUser, Pe
我正在尝试为我的模型创建一个编辑表单。我没有使用模型表单,因为根据模型类型,用户可以使用不同的表单。 (例如,其中一个表单有 Tinymce 小部件,而另一个没有。) 有没有什么方法可以使用模型设置表
Django 模板中的搜索字段 如何在类似于此图像的 Django 模板中创建搜索字段 http://asciicasts.com/system/photos/1204/original/E354I0
根据 Django documentation ,如果 Django 安装激活了 AuthenticationMiddleware,HttpRequest 对象有一个“user”属性代表当前登录的用户
我是一名优秀的程序员,十分优秀!