浏览器想网站发送请求时的方式:
GET和POST
特点:页面刷新
除此之外,也可以基于Ajax向后台发送请求(偷偷的发送请求)
依赖jQuery
编写ajax代码
$.ajax({
url:“发送的地址”,
type:“get”,
data:{
n1:123,
n2:456
},
success:function(res){
console.log(res);
}
})
案例:
设置一个按钮实现ajax
url 对应的是往哪里地址发请求
type 表示哪个请求方式
data 表示发送的数据
如果想发POST请求,由于crsf token 认证的缘故,所以可以装饰器免除csrf token认证
绑定事件还可以通过jQUEry的方式来绑定事件
ajax请求的返回值
一般都会返回JSON格式。
即后端返回到前端的一般都是返回的JSON格式
json.dumps 可以将字典类型转换为json格式的字符串类型
Django中还有JsonResponse 可以内部直接给json.dumps
前端拿到的字符串需要转换成一个对象,方便取出里面的值
实例2,通过Ajax获得输入的值
通过Jquery获得标签的值
$(“#txtUser(对应标签的id)”).val(),
效果如下:
如果输入框比较多的话:
可以通过打包表单的数据 $(“#form3(对应表单的id)”).serialize()
这样可以将对应id表单的所有的数据打包发送到后台
注意这时候form表单里面是name ,而不是id。
后端获取到信息
####案例:任务列表#####
1.设计好任务数据库
2.设置对应的url与对应的modelform这里的TaskModelForm是继承了BootStrapModelForm,将每个字段插件设置样式
再将字段传到前端页面
注意,如果使用AJAX就用不到 method=“post”
同样为前端的form 与button 设置id
设置对应的ajax
对应的编写url方法再对用户传来的数据进行校验
方法1:Modelform进行校验
注意:这里使用的是Ajax,所以不能再使用重定向redirect
将反馈的信息通过Ajax在页面显示
这里可以看到传过来的error是一个字典,里面的键是对应的字段名(name)与报错的值
所以可以通过.each字段名进行循环,然后提取出每个字段的name
因为每个输入框的id为id_+name
所以可以通过拼接将错误信息,通过 $(“#id_” + name).next() 将错误信息出现在id_name()下面
错误信息的内容就 循环过来的值,这里用data表示,所以
通过Ajax将错误的信息出现在对应的输入框下面。
为了解决输入框的上一次的错误信息,再这一次更正后,上次的错误信息不再显示,所以采用为错误信息设置class
然后通过在每次触发事件时候都将上次的错误信息进行置空
效果如下:
在下面添加相对应的任务列表
效果如下:
为了实现在添加的时候完成自动刷新页面的功能
通过JS可以实现页面的刷新
在下面添加分页:
先添加pagination文件,
将对应的queryset变成参数进行实例化,最后再在传输数据的字典中分完页的数据以及生成页码
最后再对应的html中添加对应的ul标签
对话框的模式实现AJAX
问题:不管怎样点提交按钮,在前端也未显示错误信息?活着错误信息是一闪而过?
可能的原因是 submit需要有表单时,提交时才会带数据。而button默认是不提交任何数据。
所以在使用Ajax的时候需要让button的类型设置为button,防止出错