Jquery的ajax基础知识

ajax简介
AJAX 不是一种新的编程语言而是一种使用现有标准的新方法,与服务器交换数据并更新部分网页的新技术
不需要插件的⽀持,原⽣ js 就可以使⽤
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面)不需要刷新⻚⾯就可以更新数据

ajax无需刷新提交实例
我们知道提交表单可以用form作提交然后下方定义个type=submit 用于提交此表单,ajax不刷新提交的书写格式为格式为$.ajax({‘key’:value})
通常我们使用模态对话框提交,当用户填的值不对时,点提交也会提交过去,并且页面会刷新,并且模态对话框也会消失,那么怎样才能不刷新也提示用户规范输入正确后悄悄提交呢?就要用到本文的主角Ajax

ajax请求步骤

1.添加提交按钮,并在urls文件中定义新的路径,添加views方法在这里插入图片描述
在这里插入图片描述
2为提交按钮 添加定义ajax无需刷新提交的方法,我下面写的是添加用户内容,所以data里填的是各input框的内容,定义了url为test_ajax,当点击提交按钮就会执行views下定义的test_ajax方法
Jquery的ajax基础知识_第1张图片
3.下面我们来编写views下的test_ajax方法,首先当然是获取各数据,当符合条件添加到数据库,并返回OK给客户端,客户端则会执行定义的刷新用于同步数据
,不符合的话则返回提示让用户修改
Jquery的ajax基础知识_第2张图片
以上我们就利用了ajax实现了数据发到后台,页面不刷新即可提交数据,也定义了数据有误,后端可以给提示到前端,修改后再次提交即可,过程不用刷新页面

ajax请求添加异常处理
也可以添加异常处理,为了便于操作,建议永远让服务器端返回一个字典,首先我们创建一个字典,然后根据情况设置字典值返回,下图意为,添加了错误请求,当指定长度大于5 添加到数据库,否则设置字典中error值为太短了,如果其余错误即设置error值为请求错误,在返回给前端时使用json.dumps(字典) 用于字典转化为字符串
Jquery的ajax基础知识_第3张图片

前端页面通过json.parse(字符串) 用于字符串转化成对象,以便后面的调用,提前设置好一个id为erro_msg的span标签,用于接收后端字典中的error内容,提示用户哪里错误了Jquery的ajax基础知识_第4张图片
serialize自动获取form表单
格式:$(‘form表单id或class’).serialize
$.ajax({})中需要填的data值,可以在代码前的form表单 定义一个id 然后用下图代码代替data中输入的字典,此代码会自动获取form表单中的值提交
在ajax使用serialize,在views下request.POST.get(‘必须为表单中的name值’)
在这里插入图片描述
traditional
当data中的内容有列表时,需定义traditional:true 值才能传到后台
Jquery的ajax基础知识_第5张图片

建立一对一
一对一就最简单,例如一个学生对应一个学号,一对一创建一张表即可

建立一对多
例如一个班级对应一群学生 班级是一 学生是多
一对多通过ForeignKey外键关联,当需要使用被关联表时,调用方法为:
该表名.外键命名字段名.所需字段 如下图调用为 Host.b.caption
Jquery的ajax基础知识_第6张图片

建立多对多
例如老师对应班级 都是多 每个老师教不同班级 班级也有不同老师
多对多即创建第三张关系着两个表的表,通过某表下定义ManyToManyField创建
某表下定义–>格式models.ManyToManyField(“另一表名”)
红线代码可自动生成第三张表,用于关联括号内被关联的表名,以及其代码上的表,生成一张关联两张表的关系表 Application和Host的关系表
Jquery的ajax基础知识_第7张图片

多对多创建关系表
首先我们不能直接找到第三张表,找到创建第三张表的表,获取其中的all值,发送到前端,然后创建app.html,锻炼多对多的调用在这里插入图片描述
此为通过一张表创建的关系表获取另一张中的值
row.r.all row为最外面的循环 row即是上图Application表 r是第三张表创建的命名,他里面包括了 另一张host表中的值 all则为循环所有host表值,这样我们就可以调用另一张表中的值
Jquery的ajax基础知识_第8张图片
多对多增删改查
obj为添加其余数据到表中,刚好第三张表r也在其下,再通过add添加数据
通过add添加 为多个 单个的时候把去掉即可
remove为删除 clear为清空 set为设置
在这里插入图片描述

你可能感兴趣的:(ajax,jquery,django)