Python之路【第三十一篇】:django ajax
Ajax
文件夹为Ajaxdemo
向服务器发送请求的途径：
1.浏览器地址栏，默认get请求；
2.form表单：
get请求
post请求
3.a标签，超链接（get请求）
4.Ajax请求
特点：1异步请求；2局部刷新
get
post
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
场景：
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
jquery cdn百度 src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> （把服务器上的jquery引入进来）
1.基于jquery的Ajax实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<h2>this is Index!</h2>
<button class="Ajax">Ajax</button>
<p class="content"></p>
<script>
$(".Ajax").click(function(){
//alert(123)
//发送ajax请求 （一定要有路径，是哪种请求方式呢？）
$.ajax({
url:"/test_ajax/" , //请求路径url，不加地址它会找默认当前脚本的ip地址和端口
type:"get", //请求方式
success: function (data) { //回调函数，某个事件执行完之后再去执行的函数
console.log(data); $(".content").html(data); }
})
})
</script> </body> </html>
Ajax---服务器 Ajax流程图
执行过程：
一点击Ajax按钮，触发click这个函数，然后发就要发生ajax，给test_ajax发Ajax路径请求，当url匹配成功后，它把这次请求的结果交给了data，（在test_ajax里返回了一个hello kris的字符串）刚刚那个hello kris这个字符串就交给了data（data拿到结果）；然后再执行那个回调函数能够打印，用js处理data. （在页面中加上节点）
2.Ajax数据传递
urls
from django.contrib import admin
from django.urls import path from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
path('test_ajax/', views.test_ajax),
path('cal/', views.cal),
]
views.py
from django.shortcuts import render, HttpResponse # Create your views here.
def index(request): return render(request, "index.html")
def test_ajax(request): #这次请求在处理ajax请求，
print(request.GET) #拿到数据，去处理
return HttpResponse("Hello kris") #根据数据给回调函数返回个什么参数 def cal(request):
print(request.POST)
n1=int(request.POST.get("n1")) #取出这两个值
n2=int(request.POST.get("n2"))
ret = n1+n2 #计算下
return HttpResponse(ret)
index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
7 </head>
8 <body>
9 <h2>this is Index!</h2>
10 <button class="Ajax">Ajax</button>
11 <p class="content"></p>
12
13 <hr>
14 <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>
15 <script>
16 $(".Ajax").click(function(){
17 //alert(123)
18 //发送ajax请求
19 $.ajax({
20 url:"/test_ajax/" , //请求url，不加地址它会找默认当前脚本的ip地址和端口
21 type:"get", //请求方式 a=1&b=2
22 data:{a:1,b:2}, //发送数据，键值
23 success: function (data) { //回调函数，某个事件执行完之后再去执行的函数
24 console.log(data);
25
26 $(".content").html(data);
27 }
28 })
29 })
30 //Ajax计算求值
31 $(".cal").click(function () {
32 $.ajax({
33 url:"/cal/", //交给cal的路径
34 type:"post",
35 data:{
36 "n1":$("#num1").val(),
37 "n2":$("#num2").val(),
38 },
39 success: function (data) {
40 console.log(data);
41 $("#ret").val(data);
42 }
43 })
44 })
///////////////form表单一定要有input标签放有效控件，action发送路径，method是请求方式；数据由input type="text"里边的内容决定；键就是name指定的值，
一点submit按钮就会给你自动组装这两个键值,通过method指定的方式发给action指定的路径
<form action="" method="">
<input type="text", name="user">
<input type="text", name="pwd">
</form>
///////////////////
45 </script>
46
47 </body>
48
49
50 </html>
3.基于Ajax的登录验证
用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。
models
from django.db import models # Create your models here.
class User(models.Model):
name = models.CharField(max_length=32)
pwd = models.CharField(max_length=32)
views
from app01.models import User
def login(request):
print(request.POST) #<QueryDict: {'user': ['kris'], 'pwd': ['123']}>
user = request.POST.get("user")
pwd = request.POST.get("pwd")
user = User.objects.filter(name=user, pwd=pwd).first()
res = {"user":None, "msg":None} #如果登录成功了默认是None，有值肯定是登录成功了； "msg"是避免出现错误信息，错误信息是什么
if user:
res["user"] = user.name
else:
res["msg"] = "username or password wrong!" #失败了给msg赋个值
import json #想把res这个字典交给data，HttpResponse里边必须放字符串，
return HttpResponse(json.dumps(res)) #序列化下，json字符串 。
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<form>
用户名<input type="text" id="user">
密码<input type="password" id="pwd"> //下面是button只是一个按钮；改成submit就会组成键值对发过去，就是form表单请求了。
<input type="button" value="submit" class="login_btn"><span class="error"></span>
</form> <script>//登录验证
$(".login_btn").click(function () {
$.ajax({
url:"/login/",
type:"post",
data:{
"user":$("#user").val(),
"pwd":$("#pwd").val(),
},
success:function(data){
console.log(data); //json字符串 ，js再给它反序列化拿到它支持的类似字典的object类型。
console.log(typeof data); var data = JSON.parse(data) //js再用它自己的json方法给它反序列化成字典 object{}；js这个语言反序列化的方法是json.parse
console.log(data); //反序列化类似字典的object
console.log(typeof data);
if (data.user){ //有值登录成功了就让它跳转下
location.href="http://www.baidu.com"
}
else { //html文本赋值（错误信息值）
$(".error").html(data.msg).css({"color":"red","margin-left":"10px"})
}
}
})
}) </script> </body> </html>
4.上传文件
4.1基于form表单上传文件
views
def file_put(request):
if request.method == "POST":
print(request.POST) #用户上传的数据 post <QueryDict: {'user': ['kris']}>
print(request.FILES) #拿到这个文件 <MultiValueDict: {'avatar': [<InMemoryUploadedFile: 袁娅维.jpg (image/jpeg)>]}>
file_obj = request.FILES.get("avatar") #把文件下载来
with open(file_obj.name, "wb")as f: #上传的文件名file_obj.name 会把这个文件存到跟目录下
for line in file_obj:
f.write(line) return HttpResponse("ok")
return render(request, "file_put.html")
file_put.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>基于form表单的文件上传</h3>
<form action="" method="post" enctype="multipart/form-data"> //上传文件一定要加上这个
用户名<input type="text" name="user">
头像<input type="file" name="avatar">
<input type="submit">
</form> </body>
</html>
4.2 请求头ContentType:urlencoed
都在这个字符串报文里边（请求首行、请求头、请求体）： 请求首行 请求头（决定数据以什么格式进行编码） .... ContentType:urlencoed（告诉服务器，这次发过来的请求体的数据是按照urlencoed这种格式进行编码的（a=1&b=2..）） 请求体（a=1&b=2&c=3） 服务器那边拿到这个wsgiref先检查ContentType，如果是urlencoed它就知道你是怎么编码的了，它就按照这种方式解码，拿到相应的键以及对应的值。 enctype="multipart/form-data"是另外一种编码格式，文件可以用这种方式；而普通的键值只适用这种 enctype="application/x-www-form-urlencoded" 编码格式
enctype="multipart/form-data" #上传文件一定要加上这个
enctype="application/x-www-form-urlencoded" #普通的键值对的上传加这个
file_put.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<h3>简单的form</h3>
<form action="" method="post" enctype="application/x-www-form-urlencoded"> {#普通的键值只能用这种#}
用户名<input type="text" name="user">
密码<input type="password" name="pwd">
<input type="submit">
</form> <h3>基于form表单的文件上传</h3>
<form action="" method="post" enctype="multipart/form-data">
用户名<input type="text" name="user">
头像<input type="file" name="avatar">
<input type="submit">
</form> <h3>基于Ajax文件上传</h3>
<form action="" method="post">
用户名<input type="text" name="user">
<input type="button" class="btn" value="Ajax">
</form>
<script>
$.ajax({
url:"",
type:"post",
data:{
a:1,
b:2
},//无论是ajax还是form它们都有一个默认的请求头ContentType:urlencoed ，把我们写好的数据按照某种类型编码好之后放到请求体中，然后把整个报文部分发给服务器
success: function (data) {
console.log(data)
}
})
</script>
</body>
</html>
4.3 Ajax传递json数据
file_put
<h3>基于Ajax文件上传</h3>
<form action="" method="post">
用户名<input type="text" name="user">
<input type="button" class="btn" value="Ajax">
</form>
<script>
$(".btn").click(function()){
$.ajax({
url:"",
type:"post",
contentType:"application/json", //不加它默认是contentType：urlencoed；加上application/json相当于是告诉服务器这次编码类型是json数据了
data:JSON.stringify({ #对一个数据进行序列化，相当于python里边的json.dumps,把这个a:1,b:2数据放到stringify里边，它对应的值就是json字符串
a:1, //告诉服务器这次发的是json数据你到时候按照json解就可以了
b:2
}), //无论是ajax还是form它们都有一个默认的请求头ContentType:urlencoed ，把我们写好的数据按照某种类型编码好之后放到请求体中，然后把整个报文部分发给服务器
success: function (data) {
console.log(data)
}
});
});
</script>
请求首行
请求头（决定数据以什么格式进行编码）
....
ContentType:json #urlencoed（告诉服务器，这次发过来的请求体的数据是按照urlencoed这种格式进行编码的（a=1&b=2..））
请求体{"a":"1", "b":"2"} #到时候反序列化就可以了 #（a=1&b=2&c=3）
views
def file_put(request):
if request.method == "POST":
print("body",request.body) #请求报文中的请求体 body b'{"a":1,"b":2}' 取的时候进行解码，反序列化就可以了；a=1&b=2在请求体里边，所以能打印出
print("post",request.POST) #用户上传的数据；post <QueryDict: {}> 只有在ContentType:urlencoed时，request.POST才有数据，数据存到body里边了 return HttpResponse("ok")
return render(request, "file_put.html")
'''
请求首行
请求体
'''
'''
ContentType:urlencoed 请求头 这样的编码格式 ；multipart/form-data文件上传只能用这种
请求体（a=1&b=2&c=3)
'''
Python之路【第三十一篇】:django ajax的更多相关文章
- Python之路(第三十一篇) 网络编程：简单的tcp套接字通信、粘包现象
一.简单的tcp套接字通信 套接字通信的一般流程 服务端 server = socket() #创建服务器套接字 server.bind() #把地址绑定到套接字,网络地址加端口 server.lis ...
- Python之路【第十一篇】：CSS --暂无内容-待更新
Python之路[第十一篇]:CSS --暂无内容-待更新
- Python之路【第二十一篇】Django ORM详解
ORM回顾 关系对象映射(Object Relational Mapping,简称ORM). django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表. 对于ORM框 ...
- Python之路【第二十一篇】：Django之Form组件
Django之Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1. ...
- Python之路【第十一篇】: 进程与线程
阅读目录 一. cpython并发编程之多进程1.1 multiprocessing模块介绍1.2 Process类的介绍1.3 Process类的使用1.4 进程间通信(IPC)方式一:队列1.5 ...
- 【Python之路】第二十三篇--Django【进阶篇】
文件配置 1.模版Templates文件配置: TEMPLATE_DIRS = ( os.path.join(BASE_DIR,'templates'), ) 2.静态文件static配置: STAT ...
- Python之路【第十一篇】前端初识之HTML
HTML HTML解释: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他 ...
- Python之路【第十一篇续】前端初识之CSS
css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...
- Python之路(第三十七篇)并发编程：进程、multiprocess模块、创建进程方式、join()、守护进程
一.在python程序中的进程操作 之前已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创建的.因此,运行起来的python程序 ...
- Python之路(第三十篇) 网络编程：socket、tcp/ip协议
一.客户端/服务器架构 1.硬件C/S架构(打印机) 打印机作为一个服务端,电脑连接打印机进行打印 2.软件C/S架构 互联网中处处是C/S架构 如谷歌网站是服务端,你的浏览器是客户端(B/S架构也是 ...
随机推荐
- MongonDB
目录 1.下载MongoDB 2.启动MongoDB 3.添加环境变量,添加启动服务 1.下载MongoDB MongoDB的官网 简单下载方法 win32/mongodb-win32-x86_64- ...
- memset使用技巧
memset可以对高位数组进行初始化,非常方便.需要注意的是memset的头文件是string.h和memory.h . 下面来谈memset的4个使用技巧: (注:一下dp高维数组都是全局变量,局部 ...
- Anniversary party（hdu1520）（poj2342）题解
原题地址:http://poj.org/problem?id=2342 题目大意: 上司和下属不能同时参加派对,求参加派对的最大活跃值. 关系满足一棵树,每个人都有自己的活跃值(-128~127) 求 ...
- mpvue图片上传
mpvue小程序项目中的图片上传 我的csdn博客地址:https://blog.csdn.net/zmkyf1993 一般我是优先更新csdn内容,然后在拷过来的. 效果图 通过mpvue文档得知他 ...
- bash: ip: command not found
Centos安装 # yum install iproute2 iproute2-doc Ubuntu安装 # apt-get install iproute2 iproute2-doc
- E4A碰到打开自动闪退又自动打开又闪退一直循环的问题
E4A碰到打开自动闪退又自动打开又闪退一直循环的问题 这几天写了一个脚本,自己手机上,模拟器上,均测试没有问题,可以正常操作 发给另一个人,他那边居然没有一个设备能运行成功! 而且一直闪退,闪退后又打 ...
- Spring Boot 怎么打一个可执行 Jar 包？
传统的 Java 应用程序都需要打一个 war 包,并到到 Tomcat webapps 目录下运行. Java 支持打 Jar 包,但没有提供一个标准的方式在一个 Jar 包内再加载嵌入别的 Jar ...
- ubuntu之路——day17.4 卷积神经网络示例
以上是一个识别手写数字的示例 在这个示例中使用了两个卷积-池化层,三个全连接层和最后的softmax输出层 一般而言,CNN的构成就是由数个卷积层紧跟池化层再加上数个全连接层和输出层来构建网络. 在上 ...
- php error_reporting()关闭报错
错误报告级别:指定了在什么情况下,脚本代码中的错误(这里的错误是广义的错误,包括E_NOTICE注意.E_WARNING警告.E_ERROR致命错误等)会以错误报告的形式输出. 一.常用设置说明 er ...
- Dubbo自定义Filter统一处理异常
Dubbo版本:2.7 使用自定义Filter注意事项 1.自定义名称不能和默认Filter相同,否则可能不生效 2.只用定义Filter类和META-INF下的文本文件,不用添加配置,@Activa ...