Django学习系列之Form表单结合ajax
Forms结合ajax
Forms的验证流程:
- 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<input type="password" name="pwd"/>,也就是说pwd=pwd)
- 把用户提交的数据交给规则的类处理
- 规则的类会判断用户输入的内容是否符合定义的规则
- 如果正确就把用户输入的内容以字典的形式存储,否则把报错信息以字典的形式存储
简单的Django-Form表单验证
定义urls.py
from django.conf.urls import url
from django.contrib import admin
from cmdb import views
urlpatterns = [
url(r'^login/', views.login),
]
定义views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
import json
from django import forms #定义用户输入的规则
class LoginForm(forms.Form):
user = forms.CharField(required=True) #定义login.html中input标签中name=user的标签规则
pwd = forms.CharField(required=True) #定义login.html中input标签中name=pwd的标签规则 def login(request):
if request.method == 'POST':
obj = LoginForm(request.POST) #把login.html中用户输入的内容封装到LoginForm类交给它处理
ret = obj.is_valid() #如果提交的数据符合LoginForm中的规则,则返回True,否则返回False
if ret:
print(obj.clean()) #如果符合规则以字典的形式打印出用户提交的数据
else:
print(obj.errors) #如果不符合规则以字典的形式打印出错误
return render(request,'login.html')
定义login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<input type="text" name="user"/>
</div>
<div>
<input type="password" name="pwd"/>
</div>
<input type="button" value="提交" onclick="DoSubmit();"/>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
var input_dict = {};
function DoSubmit() {
$("input").each(function () { #相当于for循环所有input标签
var v = $(this).val(); #获取循环到当前input标签的内容
var n = $(this).attr('name'); #获取循环到当前input标签的属性值,name=user,user就是属性值,name=pwd,pwd就是属性值
input_dict[n] = v; #生成字典:{'属性值':'标签输入的内容'},{'pwd':111}
});
console.log(input_dict);
$.ajax({
url:'/login/',
type:'POST',
data:input_dict,
success:function (data) {
console.log(data);
},
error:function () { }
})
}
</script>
</body>
</html>
ModelForm结合ajax
需求:
修改个人信息,如果有字段没填写就报错,如果字段填写没问题就保存到数据库
urls.py
url(r'^info/$',views.UserInfoView.as_view(),name='user_info'),
models.py
class UserProfile(AbstractUser):
nick_name = models.CharField(max_length=,verbose_name='昵称',default='')
birday = models.DateField(null=True,blank=True,verbose_name='生日')
choice_gender = (
("male","男"),
("female","女"),
)
gender = models.CharField(choices=choice_gender,default='female',max_length=,verbose_name='性别')
address = models.CharField(max_length=,default='',verbose_name='地址')
mobile = models.CharField(max_length=,null=True,blank=True,verbose_name='手机号')
image = models.ImageField(upload_to='image/%Y/%m',default='image/default.png',max_length=) class Meta:
verbose_name = "用户信息"
verbose_name_plural = "用户信息" def __str__(self):
return self.username
forms.py
from users.models import * class UserInfoForm(forms.ModelForm):
class Meta:
model = UserProfile
fields = ['nick_name','birday','gender','address','mobile']
views.py
class UserInfoView(LoginRequiredMixin,View):
def get(self,request):
return render(request,'usercenter-info.html',{})
def post(self,request):
res = dict()
userinfo = UserInfoForm(request.POST,instance=request.user)
if userinfo.is_valid():
userinfo.save()
res['status'] = 'success'
else:
res = userinfo.errors
print(json.dumps(res))
# 假如address字段信息未填写,报错信息是这样的: "address": ["这个字段是必填项"]}
return HttpResponse(json.dumps(res),content_type='application/json')
userinfo.html
<form class="perinform" id="jsEditUserForm" autocomplete="off">
<ul class="right">
<li>昵 称：
<input type="text" name="nick_name" id="nick_name" value="{{ request.user.nick_name }}" maxlength="">
<i class="error-tips"></i>
</li>
<li>生 日：
<input type="text" id="birth_day" name="birday" value="{{ request.user.birday }}" readonly="readonly"/>
<i class="error-tips"></i>
</li>
<li>性 别：
<label> <input type="radio" name="gender" value="male" {% ifequal request.user.gender 'male' %}checked{% endifequal %} >男</label>
<label> <input type="radio" name="gender" value="female" {% ifequal request.user.geder 'female' %}checked{% endifequal %}>女</label>
</li>
<li class="p_infor_city">地 址：
<input type="text" name="address" id="address" placeholder="请输入你的地址" value="{{ request.user.address }}" maxlength="">
<i class="error-tips"></i>
</li>
<li>手 机 号：
<input type="text" name="mobile" id="mobile" placeholder="请输入你的手机号码" value="{{ request.user.mobile|default_if_none:'' }}" maxlength="">
</li>
<li>邮 箱：
<input class="borderno" type="text" name="email" readonly="readonly" value="{{ request.user.email }}"/>
<span class="green changeemai_btn">[修改]</span>
</li>
<li class="button heibtn">
<input type="button" id="jsEditUserBtn" value="保存">
</li>
</ul>
{% csrf_token %}
</form> $('#jsEditUserBtn').on('click', function(){
var _self = $(this),
$jsEditUserForm = $('#jsEditUserForm')
verify = verifySubmit(
[
{id: '#nick_name', tips: Dml.Msg.epNickName, require: true}
]
);
if(!verify){
return;
}
$.ajax({
cache: false,
type: 'post',
dataType:'json',
url:"/users/info/",
data:$jsEditUserForm.serialize(), #把form表单填写的内容序列化成json
async: true,
beforeSend:function(XMLHttpRequest){
_self.val("保存中...");
_self.attr('disabled',true);
},
success: function(data) {
if(data.nick_name){
_showValidateError($('#nick_name'), data.nick_name); #假如nick_name字段未填写报错是这样的:{"nick_name":{"这个字段是必填项"}},所以如果nick_name字段有报错就能获取到报错信息然后展示,birth_dat字段也同理,
}else if(data.birday){
_showValidateError($('#birth_day'), data.birday);
}else if(data.address){
_showValidateError($('#address'), data.address);
}else if(data.status == "failure"){
Dml.fun.showTipsDialog({
title: '保存失败',
h2: data.msg
});
}else if(data.status == "success"){
Dml.fun.showTipsDialog({
title: '保存成功',
h2: '个人信息修改成功！'
});
setTimeout(function(){window.location.href = window.location.href;},);
}
},
complete: function(XMLHttpRequest){
_self.val("保存");
_self.removeAttr("disabled");
}
});
});
效果
Django学习系列之Form表单结合ajax的更多相关文章
- Django学习系列之Form基础
Django学习系列之Form基础 2015-05-15 07:14:57 标签:form django 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追 ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- 关于form表单或者Ajax向后台发送数据时，数据格式的探究
最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...
- form表单的ajax验证2
form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- laravel中form表单，ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- Django基础，Day5 - form表单投票详解
投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...
- Django框架获取各种form表单数据
Django中获取text,password 名字:<input type="text" name="name"><br><br& ...
- Django学习系列之Form验证
django表单基础 django表单分类 基于django.forms.Form:所有表单类的父类 基于django.forms.ModelForm:可以和模型类绑定的Form Form验证流程 定 ...
随机推荐
- css定位position属性深究
1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...
- vb 案例学习
' ================================================================================================== ...
- 【4412开发板使用经验分享】迅为4412开发板I2C驱动问题
本文转自迅为论坛:bbs.topeetboard.com 我想写DS3231 的驱动 但是读回的数据老是-6 硬件: 我I2C设备连接的这几个GPIO,看了2.5的手册,接口应该是链接正确的 软件 分 ...
- python selenium等待特定网页元素加载完毕
selenium等待特定元素加载完毕 is_disappeared = WebDriverWait(driver, 8, 0.5, ignored_exceptions=TimeoutExceptio ...
- Python入门之类(class)
面向对象三大特性 面向对象的三大特性是指:封装.继承和多态. 一.封装 封装,顾名思义就是将内容封装到某个地方,以后再去调用被封装在某处的内容. 所以,在使用面向对象的封装特性时,需要: 将内容封装到 ...
- CF1000G Two-Paths
题目大意:给你一棵树,其中点上和边上都有值.定义2-Path为经过一条边最多两次的路径,价值为经过点的权值加和-经过边权值*该边经过次数.4e5组询问,每次询问树上连接x,y两点的2-Path的最大价 ...
- [Python3网络爬虫开发实战] 1.4.3-Redis的安装
Redis是一个基于内存的高效的非关系型数据库,本节中我们来了解一下它在各个平台的安装过程. 1. 相关链接 官方网站:https://redis.io 官方文档:https://redis.io/d ...
- SSH安全服务
ssh安全服务 client \ sever ssh: secure shell, protocol, 22 / tcp, 安全的远程登录, 基于RSA或DSA实现身份认证 两 ...
- Ajax实现跨域访问最新方式
在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置. ...
- Python自动化测试-使用Pandas来高效处理测试数据
一.思考 1.Pandas是什么? 功能极其强大的数据分析库 可以高效地操作各种数据集 csv格式的文件 Excel文件 HTML文件 XML格式的文件 JSON格式的文件 数据库操作 2.经典面试题 ...