基于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中是 ...
随机推荐
- ORA-12541:TNS:无监听程序
1.OracleServiceORCL确认已经在服务中启动 2.OracleOraDb11g_home1TNSListener确认已经在服务中启动 3.服务端listener.ora和tnsnames ...
- webpack打包优化
https://www.cnblogs.com/vvjiang/p/9327903.html
- 红黑树(red-black tree)实现记录
https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...
- ECMAScript 6
参考网上其他帖子,整理如下 ES6 就是ECMAScript 6是新版本JavaScript语言的标准. 增加了如下 Promises Promises是处理异步操作的对象,使用了 Promi ...
- webpack多入口优化
最近接手的项目是公司之前搭的多页面应用脚手架,然后到现在入口页面大大小小超过半百了,然后每次更新完配置之后,重启页面就贼拉卡,实在太影响开发效率了,于是开始优化呗. 最开始发现如果你想要让加载速度变快 ...
- Vue如何更新子组件
黑科技: 给子组件绑定一个key值,当key值改变时,子组件就会更新 ~
- 执行python文件报错SyntaxError: Non-ASCII character '\xe8' in file, but no encoding declared
在文件头部加上: # -*- coding: utf-8 -*
- 百度地图缩小后marker点的图标移动
遇到的坑:使用百度地图,当地图缩小时,marker点的自定义图标会出现偏移的问题,marker点的信息窗口会出现闪烁问题. 原因:1.anchor是定位点距离图片左上角的偏移量.如果不给anchor的 ...
- Unexpected character '�' (1:0) while parsing file
webpack打包,如果在html中有<img>标签,会打包不成功,因为找不到路径,所只要把图片放样式里就好了
- 【Rails App】 应用服务器从Passenger切换为Puma, Grape出现线程安全问题
Grape中的代码如下: def market @market ||= Market.find(params[:id]) end @market基于类层次的实例变量,属于非线程安全,如果一直使用多线程 ...