基于ajax提交数据
昨日回顾:
1 inclusion_tag
-干什么用的?生成html的片段(动态,传参数,传数据)
-app下新建一个模块,templatetags
-创建一个py文件(mytag.py)
-from django.template import Library
-register=Library() ----->register名字一定不能变
-写装饰器(标签,过滤器,inclusion_tag)
-@inclusion_tag('模板路径',name='重命名')
-def my_in(): 不写,写多个,不写不传,写多个,按空格来传参
- 一堆逻辑处理,查数据库
- ret=Book.object.all()
return {''books':ret}
-在模板中:
可以用books这个变量,渲染页面
-应用:
-在另一个模板中:
-{%load mytag.py%}
-{% my_in %}
2 defer,only
-defer---->除了指定字段之外
-only---->只查询几个字段
-比如:ret=Book.object.all().only('name')
-id始终会查
-结果是queryset对象,套book对象
-问:如果取price,发生了什么?
-它会再次查询数据库,对数据库造成压力
3 事务(原子性操作)
from django.db import transition
with transition.atomic():
sql1
sql2
4 choice
-模型表中某个字段,可以指定choice,用在选择不经常变的情况,经常变,尽量用数据库
user_type=models.ForeignKey(to='Info', to_field='id',db_constraint=False)
#取出对应的汉字
# author对象.user_type.name
mychoice=((1,'男'),(2,'女'),(3,'其他'))
# dd = models.ForeignKey(to='Info', to_field='id')
#取出对应的汉字
dd = models.ForeignKey(choices=mychoice)
5 反向解析
-动态获取路径(根据名字)
-路由: url(r'^inde/$', views.Test.as_view(),name='index'),
url(r'^inde/(\d+)$', views.Test.as_view(),name='index'),
-在视图层:
def mytest(request):
# 用在视图层
url=reverse('index',args=(12,))
return redirect(url)
-在模板中用:
<a href="/index/">点我跳到index页面</a>
<a href="{% url 'index' 12 %}">点我跳到index页面</a>
{#这个位置相当于放了"/inde/"#}
6 多对多的关系,三种写法
-手动创建第三张表(不创建关联关系)
class Book(models.Model):
# 默认会创建id
name = models.CharField(max_length=32)
class Author(models.Model):
name = models.CharField(max_length=32)
class Book2Author(models.Model):
id = models.AutoField(primary_key=True)
book=models.ForeignKey(to='Book',to_field='id')
author=models.ForeignKey(to='Author',to_field='id')
-不管是插入和查询,删除,都很麻烦(一般不用)
-自动创建第三张表
-查询,插入,删除,都很方便
-缺点:字段是固定的,第三张表如果要添加字段,实现不了
-手动创建第三张表,建立关联关系
class Book(models.Model):
# 默认会创建id
name = models.CharField(max_length=32)
# 中介模型,手动指定第三张中间表是Book2Author
authors=models.ManyToManyField(to='Author',through='Book2Author',through_fields=('book','author'))
class Author(models.Model):
name = models.CharField(max_length=32)
def __str__(self):
return self.name
class Book2Author(models.Model):
id = models.AutoField(primary_key=True)
book=models.ForeignKey(to='Book',to_field='id')
author=models.ForeignKey(to='Author',to_field='id')
-through:来指定我的第三张表是哪个
-through_fields:('book','author'),第一个值是:从中间表找到设置关联字段的表,通过哪个字段,第一个位置就写它
-终极总结:防止混了:关联字段就是表名小写,第一个值:就是当前表的表名小写
-查询,新增,删除,都很方便
-第三张表,可以添加别的字段
7 ajax
1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json
2 ajax干啥用的?前后端做数据交互:
3 之前学的跟后台做交互的方式:
-第一种:在浏览器窗口输入地址(get)
-第二种:用form表单提交数据
4 特点:
-异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
-局部刷新:
5 $.ajax({
url:'/index/',
type:'post',
//data:往后台提交的数据
data:{'name':'lqz','age':18},
//成功的时候回调这个函数
success:function (data) {
alert(data)
}
})
6 上传文件
模板层:
$("#btn").click(function () {
//上传文件,必须用FormData,生产一个formdata对象
var formdata=new FormData();
formdata.append('name',$("#name").val());
//取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来
formdata.append('myfile',$("#myfile")[0].files[0]);
$.ajax({
url:'/files_ajax/',
type:'post',
//不预处理数据,(name=lqz&age=18)
processData:false,
//指定往后台传数据的编码格式(urlencoded,formdata,json)
//现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了
contentType:false,
data:formdata,
success:function (data) {
alert(data)
}
})
视图层:(跟form表单上传文件完全一样)
def files_ajax(request):
# 提交文件从,request.FILES中取,提交的数据,从request.POST中取
name=request.POST.get('name')
print(name)
dic_files = request.FILES
myfile = dic_files.get('myfile')
with open(myfile.name, 'wb') as f:
# 循环上传过来的文件
for line in myfile:
# 往空文件中写
f.write(line)
return HttpResponse('ok')
7 基于ajax提交json格式数据
-模板层:
$('#btn').click(function () {
var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};
console.log(typeof post_data);
// 如何把post_data这个字典,转成json格式字符串
//JSON.stringify相当于python中json.dumpus(post_data)
//pos是个字符串,json格式字符串
var pos=JSON.stringify(post_data);
console.log(typeof pos);
$.ajax({
url:'/json/',
type:'post',
data:pos,
contentType:'application/json',
success:function (data) {
//如果data是json格式字符串,如何转成对象(字典)?
//data=JSON.parse(data)
console.log(typeof data)
console.log(data)
var ret=JSON.parse(data)
console.log(typeof ret)
console.log(ret.status)
//alert(data)
}
})
})
-视图层:
def add_json(request):
if request.method=='GET':
return render(request,'json.html')
print(request.POST)
print(request.GET)
print(request.body)
import json
# res是个字典
res=json.loads(request.body.decode('utf-8'))
print(res)
print(type(res))
dic={'status':'100','msg':'登录成功'}
# return HttpResponse('ok')
# 返回给前台json格式
return HttpResponse(json.dumps(dic))
# return JsonResponse(dic)
-重点:*****
- 请求的编码方式:
contentType:'application/json',
-响应回来解析的方式
dataType:'json',
作业:
1 用户在表单输入用户名与密码,通过Ajax提交给服务器,服务器验证后返回响应信息,客户端通过响应信息确定是否登录成功,成功,则跳转到百度,否则,在页面上显示相应的错误信息location.href='http://www.baidu.com'
2 两种提交数据的方式(urlencoded,json)
3 手动创建第三张表:
详见下午
4 上课讲的敲一遍
基于ajax提交数据的更多相关文章
- 基于Ajax提交formdata数据、错误信息展示和局部钩子、全局钩子的校验。
formdata重点: 实例化FormData这个类 循环serializeArray可以节省代码量 图片要用$('#id')[0].files[0]来获得 加上contentType:false和p ...
- ThinkPHP中ajax提交数据
最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...
- ajax提交数据
ajax提交数据 注意:获取值可以从方法参数传过来 也可以通过jquery获取对应标签的值:同时参数要与请求的动作方法的参数一致,否则值无法映射 发送 ajax (get 方式简写)请求 注 ...
- form表单提交数据,页面必定会刷新,ajax提交数据不会刷新,做到悄悄提交,多选删除,ajax提交实例
很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
- 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
- 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据
昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- 怎样通过ajax提交数据
ajax的出现彻底改变了javascript命运,通过ajax可以直接向服务器提交数据,有两种方式: get方式,数据直接拼接在地址中 post方式,数据由data字段携带 post方式,data中是 ...
随机推荐
- 微信小程序---转发分享功能
1. 转发---onShareAppMessage 2.不带参数 //用户点击右上角分享 onShareAppMessage: function (res) { return { title: 'xx ...
- jQuery-UI的使用
使用效果图: 源码: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- echarts饼图去除鼠标移入高亮
1:如果echarts的js文件为压缩版本,在编辑器打开去掉t.on("mouseover",c).on("mouseout",d)这一行,如果js文件为非压缩 ...
- Tomcat 配置MySQL连接池
<!--配置mysql数据库的连接池, 需要做的额外步骤是将mysql的Java驱动类放到tomcat的lib目录下 maxIdle 连接池中最多可 ...
- 【转】图解CSS padding、margin、border属性
http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...
- Linux-02
Linux命令 命令格式:命令 [-选项] [参数] 例如: ls -la /etc 说明:1)个别命令使用不遵循此格式 2)当有多个选项时,可以写在一起 3)简化选项与完整选项-a等于--all
- Eclipse安装TestNG插件
TestNG按照其文档的定义是: TestNG是一个测试框架,其灵感来自JUnit和NUnit的,但引入了一些新的功能,使其功能更强大,使用更方便. TestNG是一个开源自动化测试框架;TestNG ...
- redis缓存雪崩、穿透、击穿概念及解决办法
缓存雪崩 对于系统 A,假设每天高峰期每秒 5000 个请求,本来缓存在高峰期可以扛住每秒 4000 个请求,但是缓存机器意外发生了全盘宕机.缓存挂了,此时 1 秒 5000 个请求全部落数据库,数据 ...
- Requset模块
Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库 各种请求方式: #!/urs/bin/evn python # -*- cod ...
- 实际操作--create DB link
我可以查看6D1数据库中的表了:我在哪个表里创建database说明我想访问database中的表~ SELECT * FROM TEST001MX@TESTLINK1 databa ...