下面是小凰凰的简介&＃xff0c;看下吧&＃xff01;
&＃x1f497;人生态度&＃xff1a;珍惜时间&＃xff0c;渴望学习&＃xff0c;热爱音乐&＃xff0c;把握命运&＃xff0c;享受生活
&＃x1f497;学习技能&＃xff1a;网络 -> 云计算运维 -> python全栈( 当前正在学习中)
&＃x1f497;您的点赞、收藏、关注是对博主创作的最大鼓励&＃xff0c;在此谢过&＃xff01;
有相关技能问题可以写在下方评论区&＃xff0c;我们一起学习&＃xff0c;一起进步。
后期会不断更新python全栈学习笔记&＃xff0c;秉着质量博文为原则&＃xff0c;写好每一篇博文。
文章目录
- 一、Ajax简介
- 1、浏览器向服务器发送请求的形式
- 2、Ajax引言
- 3、Ajax两大特点
- 4、Ajax怎么实现局部刷新呢&＃xff1f;
- 二、Ajax案例
- 三、json在Ajax简单应用
一、Ajax简介
作用&＃xff1a;前端浏览器向后端服务器发送请求的一种技术
AJAX&＃xff08;Asynchronous Javascript And XML&＃xff09;翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互&＃xff0c;传输的数据为XML&＃xff08;当然&＃xff0c;传输的数据不只是XML,现在更多使用json数据&＃xff09;。
1、浏览器向服务器发送请求的形式
&＃xff08;1&＃xff09;地址栏输入url 默认get方式
&＃xff08;2&＃xff09;form表单的提交按钮 get或者post
&＃xff08;3&＃xff09; a标签 默认get&＃xff08;4&＃xff09;ajax get或者post
浏览器向服务器发送请求方式远不止get、post&＃xff0c;还有delete等其他请求方式&＃xff0c;慢慢来&＃xff0c;现在暂时先了解post、get&＃xff01;
2、Ajax引言
上面的请求形式中前3个的请求方式时&＃xff0c;浏览器接收到回应消息时&＃xff0c;会刷新整个页面。那么能不能实现局部刷新呢&＃xff1f;ajax就能实现这点。
有人可能会问&＃xff0c;什么叫局部刷新&＃xff1f;
看上图&＃xff0c;我点击注册浏览器整个页面并没有刷新&＃xff0c;而是局部刷新了&＃xff0c;然后出现了用户名已经被使用字样&＃xff01;
想上面这种请求方式毫无疑问肯定采用了ajax&＃xff01;其实现在博客园这种&＃xff0c;用户体验并不好&＃xff0c;因为还需要点击注册&＃xff01;我们来看看百度注册页&＃xff1a;
输入框失去焦点&＃xff0c;马上发送ajax请求&＃xff01;这样用户体验无疑比之前好很多&＃xff01;
3、Ajax两大特点
异步交互----Ajax使用Javascript技术向服务器发送异步请求
浏览器页面局部刷新----Ajax无须刷新整个页面
同步交互&＃xff1a;客户端发出一个请求后&＃xff0c;需要等待服务器响应结束后&＃xff0c;才能发出第二个请求&＃xff1b;
异步交互&＃xff1a;客户端发出一个请求后&＃xff0c;无需等待服务器响应结束&＃xff0c;就可以发出第二个请求。
4、Ajax怎么实现局部刷新呢&＃xff1f;
注意Ajax本身是不能自己实现局部刷新&＃xff0c;需要你控制它实现&＃xff01;Ajax是一种异步请求&＃xff0c;会有一个异步回调函数&＃xff0c;在回调函数中你可以添加DOM节点&＃xff0c;删除DOM节点&＃xff0c;实现添加、删除页面内容&＃xff0c;这样就实现了局部刷新&＃xff01;
二、Ajax案例
1、get请求
实现加法计算&＃xff01;效果如下&＃xff1a;
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Ajaxtitle><script src&＃61;"/static/js/jquery-3.3.js">script>
head>
<body>
<input type&＃61;"text" id&＃61;"num1"> &＃43; <input id&＃61;"num2" type&＃61;"text"> &＃61; <input id&＃61;"ret" type&＃61;"text">
<button class&＃61;"cal ">计算button>
body>
<script src&＃61;"https://cdn.jsdelivr.net/npm/jquery&＃64;1.12.4/dist/jquery.min.js">script>
<script>$(&＃39;.cal&＃39;).click(function () {var num1 &＃61; $("#num1").val();var num2 &＃61; $("#num2").val();$.ajax({url: &＃39;/cal/&＃39;,type: &＃39;get&＃39;,data: { num1: num1,num2: num2},success: function(response) { $(&＃39;#ret&＃39;).val(response)}})})
script>
html>
data是get请求所带的参数&＃xff01;后端采用request.GET.get()可以获取参数值&＃xff0c;然后进行计算&＃xff0c;再返回&＃xff0c;再在异步回调函数中渲染计算结果1
path(&＃39;&＃39;, views.index),path(&＃39;cal/&＃39;, views.cal),
def index(request):return render(request,&＃39;index.html&＃39;)
def cal(request):num1 &＃61; request.GET.get(&＃39;num1&＃39;)num2 &＃61; request.GET.get(&＃39;num2&＃39;)num3 &＃61; float(num1) &＃43; float(num2)return HttpResponse(str(num3))
2、post请求
post请求和get请求主要区别时&＃xff0c;针对post请求django需要进行csrf验证&＃xff0c;因此你的data参数中需要带着csrfmiddlewaretoken&＃xff0c;下面我把有改动的代码写下&＃xff1a;
{% csrf_token %}
type: &＃39;post&＃39;,
data: {num1: num1,num2: num2,csrfmiddlewaretoken: $("[name&＃61;&＃39;csrfmiddlewaretoken&＃39;]").val()
},
def cal(request):num1 &＃61; request.POST.get(&＃39;num1&＃39;)num2 &＃61; request.POST.get(&＃39;num2&＃39;)num3 &＃61; float(num1) &＃43; float(num2)return HttpResponse(str(num3))
三、json在Ajax简单应用
既然称之为简单应用&＃xff0c;没错 &＃xff0c;下篇博客&＃xff0c;我们将会讲解json在Ajax中的主流应用方法&＃xff01;
当涉及到python中列表、字典等数据类型的传输时&＃xff0c;我们不能直接传输&＃xff0c;因为HttpResponse传输的是一个字符串&＃xff0c;json其实就是一个字符串&＃xff01;还有一个原因就是json可以跨语言&＃xff01;因为js中的对象和python中的字典不一样&＃xff0c;需要json转&＃xff01;
json字符串是双引号&＃xff0c;但是不论是上面json中那种数据类型&＃xff0c;最外面都有单引号&＃xff08;&＃39;&＃39;&＃xff09;&＃xff0c;因此说json就是一个字符串&＃xff0c;因此json里面的字符串必须用双引号&＃xff0c;避免和单引号混淆&＃xff01;
Javascript中的json使用
序列化方法&＃xff1a; JSON.stringify() 等同于Python json.dumps()
反序列化方法&＃xff1a; JSON.parse() 等同于Python json.loads()
实现案例请见&＃xff1a;图书管理系统—多表操作版-后期优化部分
京公网安备 11010802041100号