django ajax提交form表单数据
后台:
from django.shortcuts import render
from django.shortcuts import redirect
from django.shortcuts import HttpResponse from django import forms
# 模版
class LoginForm(forms.Form):
# 模版中的元素
user = forms.CharField(min_length=6,error_messages={"required": '用户名不能为空','min_length': '用户名长度不能小6'})
email = forms.EmailField(error_messages={"required": '邮箱不能为空','invalid': '邮箱格式错误'}) class IndexForm(forms.Form):
# 模版中的元素
user = forms.CharField(min_length=6,error_messages={"required": '用户名不能为空','min_length': '用户名长度不能小6'})
email = forms.EmailField(error_messages={"required": '邮箱不能为空','invalid': '邮箱格式错误'})
favor = forms.MultipleChoiceField(
choices=[(1,'小虎'),(2,'小小虎'),(3,'小B虎')]
) import json
from datetime import date
from datetime import datetime def index(request):
obj = IndexForm()
return render(request,'index.html',{'obj': obj}) def edit_index(request):
obj = IndexForm({'user': 'root','email': 'root@live.com','favor': [2,3]})
return render(request,'index.html',{'obj': obj}) def login(request):
if request.method == "GET":
# 数据库中获取
obj = LoginForm()
return render(request,'login.html',{'oo': obj})
elif request.method == "POST":
"""
obj = LoginForm(request.POST)
# 验证
status = obj.is_valid()
print(status) value_dict = obj.clean()
print(value_dict) error_obj = obj.errors.as_json()
print(error_obj)
"""
obj = LoginForm(request.POST)
if obj.is_valid():
value_dict = obj.clean()
print(value_dict)
# create(**value_dict)
else:
# 封装了所有的错误信息
# print(obj.errors['email'][0])
# print(obj.errors["user"][0])
# print(type(error_obj))
from django.forms.utils import ErrorDict
pass return render(request, 'login.html',{'oo': obj}) def login_ajax(request):
if request.method == "GET":
return render(request, 'login_ajax.html')
elif request.method == "POST":
ret = {'status': True, 'error':None, 'data': None}
obj = LoginForm(request.POST)
if obj.is_valid():
print(obj.clean())
else:
# 方式一
# res_str = obj.errors.as_json() # res_str是一个字符串
# ret['status'] = False
# ret['error'] = res_str
# 两次反序列化
# 方式二：
ret['status'] = False
ret['error'] = obj.errors.as_data() # # {'user': [ValidationError(['用户名长度不能小6'])], 'email': [ValidationError(['邮箱格式错误'])]}
# # 一次反序列化
return HttpResponse(json.dumps(ret,cls=JsonCustomEncoder)) from django.core.validators import ValidationError
class JsonCustomEncoder(json.JSONEncoder):
def default(self, field):
if isinstance(field, ValidationError):
return {'code': field.code, 'message': field.message}
else:
return json.JSONEncoder.default(self, field)
"""
def login(request):
if request.method == "GET":
return render(request,'login.html')
elif request.method == "POST":
# 不爽
u = request.POST.get('user')
e = request.POST.get('email')
p = request.POST.get('pwd')
# 判断用户输入是否为空，提示用户那个错误
# ...
# 判断某种格式是否正确,提示用户那个错误
# ..
# 数据库校验：
# filter(user=u,email=e,pwd=p) # filter(**{})
# create(user=u,email=e,pwd=p) # create(**{})
# 只要上述条件有一个不满足， # 页面上一次提交的数据，无法保留（Form提交）
return render(request,'login.html', {})
# return redirect('/login.html')
"""
前端:
login:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Form提交数据</h1>
<form method="POST" action="/login.html">
<p>
{{ oo.user }}
<span>{{ oo.errors.user.0 }}</span> </p>
<p>
{{ oo.email }}
<span>{{ oo.errors.email.0 }}</span>
</p>
<p>
<input type="text" name="pwd" placeholder="密码" />
</p>
<input type="submit" value="提交" /> {{ msg }}
<input id="ajax_submit" type="button" value="Ajax提交" />
</form>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
$(function () { $('#ajax_submit').click(function () {
$.ajax({
url:"/login.html",
data: {user:'root', email: 'root@live.com', pwd: '123123'},
type: 'POST',
success:function (arg) {
console.log(arg)
}
}) }) })
</script>
</body>
</html>
index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>{{ obj.user }}</p>
<p>{{ obj.email }}</p>
<p>{{ obj.favor }}</p>
</body>
</html>
login_ajax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error-msg{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Form提交数据</h1>
<form id="f1">
<p>
<input id="u" type="text" name="user" placeholder="用户名" /> </p>
<p>
<input id="e" type="text" name="email" placeholder="邮箱" />
</p>
<p>
<input id="p" type="text" name="pwd" placeholder="密码" />
</p>
<input id="ajax_submit" type="button" value="Ajax提交" />
</form>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$('#ajax_submit').click(function () {
$.ajax({
url:"/login_ajax.html",
//data: {user: $('#u').val(), email: $('#e').val(), pwd: $('#p').val()},
data: $('#f1').serialize(),
type: 'POST',
success:function (arg) { $('.error-msg').remove();
var v1 = JSON.parse(arg);
console.log(v1);
if(!v1.status){
// var error_obj = JSON.parse(v1.error);
var error_obj = v1.error;
$.each(error_obj,function (k,v) {
// k: user 或 email
// v: [{}{}{},]
var tag = document.createElement('span');
tag.className = 'error-msg';
tag.innerHTML = v[0].message;
$("input[name='" + k +"']").after(tag);
})
}else{
location.href = "/index.html"
}
// { 'stauts': true, 'error':xx, 'data'：’‘}
}
})
})
})
</script>
</body>
</html>
django ajax提交form表单数据的更多相关文章
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- Ajax提交Form表单的一种方法
待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...
- ajax提交form表单问题
form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...
- Ajax提交form表单内容和文件（jQuery.form.js）
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- 使用ajax提交form表单，包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
- 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...
随机推荐
- PHP语言入门的学习方法十要素
对于PHP程序设计语言来说.每个人的学习方式不同,写这篇文章的目的是分享一下自己的学习过程,仅供参考,不要一味的用别人的学习方法,找对自己有用的学习方式.经常在某些论坛和QQ群里看到一些朋友会问“怎样 ...
- 使用jieba库与wordcloud库第三方库进行词频统计
一.jieba库与wordcloud库的使用 1.jieba库与wordcloud库的介绍 jieba 库的分词原理是利用一个中文词库,将待分词的内容与分词词库进行比对,通过图结构和动态规划方法找到最 ...
- zabbix自动发现华为，H3C交换机
一.添加自动发现规则 1.ip范围尽量别太大 zabbix是通过ARP来搜索符合条件的主机的 2.团体名和交换机要一样.这个OID值是提取系统信息的 在OID这块遇到个坑 我用Getif查询到的是1. ...
- Laravel--Artisan常用命令
查看所有的Artisan的命令php artisanphp artisan list创建控制器php artisan make:controller StudentController创建模型php ...
- FPGA——按键（二）
直接上源码: module key_led( input sys_clk , //50Mhz系统时钟 input sys_rst_n, //系统复位,低有效 :] key, //按键输入信号 :] l ...
- SuRF: Practical Range Query Filtering with Fast Succinct Tries 阅读笔记
SuRF(Succinct Range Filter)是一种快速而紧凑的过滤器,同时支持点查询和范围查询(包括开区间查询.闭区间查询.范围计数),可以在RocksDB中用SuRF来替换Bloom过滤器 ...
- .net core 2.0 HTTPS request fails using HttpClient 安全错误
最近.net core 项目中遇到一个问题,通过Httpclient 访问https的接口报错,错误如下: WinHttpException: A security error occurred Sy ...
- 基于WCF的支持跨局域网可断点续传的大文件传输服务实现
题外话:这个系列的文章记录了本人最近写的一个小工程,主要包含了两个功能,一是对文件的断点续传的功能,二是基于WCF的一对多文件主动发送的功能,顺便这也是我自己在WCF学习路上的一个小成果吧. 在网上找 ...
- TCP连接笔记
每个socket套接字都有一个引用计数. 调用close时只是将相应的引用计数减1. 只有当引用计数为0时才会真正的清理套接字资源,也就是发送FIN. 若只是想在某个TCP连接上发送一个FIN可以改用 ...
- angular1时间控件之时间比较大小，比如入住日期和离店日期，入住不能晚于离店时间
功能可能是大家有时遇到的,不过angluar1现在用的人很少了,希望帮上和我一样掉坑里的朋友吧,之前自己也在网上找过几乎没找到angluar1和我代码需求一样的控件,没办法自己造 了,看代码图 就差不 ...