django组件之ajax
AJAX简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，
传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
场景：
优点:
1. 不用刷新整个页面
2. 异步提交请求
在学习ajax之前先回顾一下基本的请求形式
客户端浏览器给服务器发请求的形式:
1 地址栏输入url 回车 默认是get请求方式
2 form表单,用户点击submit按钮
--- get
--- post
3 超链接标签(a标签) 默认是get请求方式
4 Ajax请求
---get
---post
(1) 异步
(2) 局部刷新
基于jquery实现ajax
在项目中存在index.html网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is index</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> #基于jquery要先引入jquery
</head>
<body>
{% csrf_token %} #中间组件csrf的影响,必须有csrf的认证
<h3>This is index</h3>
<button class="ajax">ajax</button>
<p class="con"></p> <hr>
<button class="ajax2">携参ajax</button> <hr>
<input type="text" class="num1"> + <input type="text" class="num2"> = <input type="text" class="result"><input
type="button" class="cal" value="计算" >
<script>
//ajax的简单使用
$('.ajax').click(function () { #给.ajax类属性的标签绑定时间
//发送ajax请求 #发送ajax请求
$.ajax({
url:'/ajax_handle/', #ajax必须有的几对参数1.url 提交的路径
type:'get',
success:function(res){ 2. type:提交的方法 post/get
console.log(res); 3.success:会执行一个函数,函数有一个参数,是来自ajax提交后的返回值
$('.con').html(res); #可以理解success是一个回调函数
}
})
});
//携参的ajax的使用
$('.ajax2').click(function(){ #一样的额绑定事件,,发送请求,
//发送ajax请求 #携参要带参数就是数据
$.ajax({ #data:{data里面一定要带钥匙csrf}
url:'/ajax_handle2/',
type:'post',
data:{
a:1,
b:2,
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
success:function (ret) {
console.log(ret)
}
})
}); //携参实例(简单的计算器)
$('.cal').click(function(){
let num1=$('.num1').val();
let num2=$('.num2').val();
console.log(num1,num2);
//发送ajax请求
$.ajax({
url:'/cal/',
type:'post',
data:{
n1:num1,
n2:num2,
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
success:function(res){
console.log(res);
console.log(typeof res);
let response=JSON.parse(res);
if (response.code == ""){
$('.result').val(response.data)
}
else{
alert(response.msg)
}
}
})
})
视图函数
from django.shortcuts import render,HttpResponse
import json
# Create your views here. def index(request): return render(request,'index.html') def ajax_handle(request): return HttpResponse('你好') def ajax_handle2(request): return HttpResponse('我擦嘞') def cal(request):
response={"code":1000,"data":None,"msg":None}
try:
print(request.POST),
print(request.GET),
n1 = request.POST.get("n1")
n2 = request.POST.get("n2")
ret = str(int(n1) + int(n2)) #接收的是字符串,转换成数字计算完成后再转化成字符串
response["data"]=ret
except Exception as e :
response["code"]=1001
response['msg']=str(e)
# HttpResponse只能接收字符串,用json序列化
return HttpResponse(json.dumps(response))
这边需要用到数据转换的语法:
python:
json.dumps()
json.loads 在JavaScript中
JSON.stringify
JSON.pasrse
关于ajax的总结
客户端浏览器通过执行一段Js代码向服务器发送一段ajax请求,服务器路由对应的视图函数返回一段Json字符串(建议用json)作为响应,
浏览器接收响应后会触发该ajax请求的回调函数success,参数为响应字符串,success内通过Dom操作将结果反应到页面上,实现局部刷新,
不像之前的请求会将响应覆盖整个页面
ajax不要返回render,redirect这些响应,就只返回HttpResponse形式的Json字符串(要记得转换数据为Json)
文件上传
一. 在讲文件上传之前应该明确的的是无论是form表单题号还是ajax提交,其默认的内容编码格式都是 application/x-www-form-urlencoded,是没有办法发送文件的
同时也是可以指定他们的编码格式:
1. form: <form action="/put/" method="post" enctype="multipart/form-data"> 2. ajax: $(".ajax_btn2").click(function () {
$.ajax({
url:"/put1/",
type:"post",
contentType:"json",
data:JSON.stringify({
a:1,
b:2
}),
success:function (res) {
console.log(res)
}
})
二. 针对post请求(有请求体)
浏览器 -----------------------------> 服务器
请求头:
contentType:urlencoded ----->{'name':'xxx','age':'xxx'}
contentType:json ---------->{}
请求体
就是说如果是urlencode编码格式的,django会把请求体放入字典,以字典形式的传递给服务器 ----------------->服务器可以到request.POST那数据
如果不是urlencode编码格式的,django就不会帮你封装 ---------------------------->,reuqest.POST是个空字典,服务器只能到request.body拿数据
基于表单form的文件上传
页面中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>form表单上传</h3>
<form action="/put/" method="post" enctype="multipart/form-data"> #必须设置为enctype="multipart/form-data"否则服务端只能拿到文件名
{% csrf_token %}
<input type="text" name="user">
<input type="file" name="file">
<input type='submit'> #看清楚了,这边的提交按钮是input标签
</form> </body>
</html>
在视图函数中:
from django.shortcuts import render,HttpResponse
import os
# Create your views here.
def index(request): return render(request,'index.html') def put(request):
print(request.POST)
print(request.FILES)
file_obj=request.FILES.get('file') #获得文件句柄
# path=file_obj.name
name=file_obj.name
with open(os.path.join('media','imgs',name),'wb') as f: #把拿到的文件句柄循环一行一行的写入文件中
for line in file_obj:
f.write(line)
return HttpResponse('上床成功')
基于ajax文件上传
index.html中
<h>ajax文件上传</h>
<form> #这边的form标签只是为了把内容包起来,用div也可以
<input type="text" class="user">
<input type="file" class="file">
<input type="button" class="ajax_btn2" value="ajax上传">
</form>
视图函数中
<script>
{#ajax文件上传 #}
$('.ajax_btn2').click(function () {
let formdata=new FormData();
formdata.append("user",$('.user').val());
formdata.append('file',$(".file")[0].files[0]);
$.ajax({
url:'/put/',
type:'post',
contentType:false, #这两个参数必须设置,否则也不能把文件上传
processData:false,
data:formdata,
success:function (res) {
console.log(res)
},
}) })
</script>
django组件之ajax的更多相关文章
- Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
- Django【第23篇】：利用Form组件和ajax实现的注册
利用Form组件和ajax实现的注册 一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面 ...
- django中的ajax组件
目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...
- Django组件之Form表单
一.Django中的Form表单介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入 ...
- python 全栈开发，Day78(Django组件-forms组件)
一.Django组件-forms组件 forms组件 django中的Form组件有以下几个功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显 ...
- python 全栈开发，Day76(Django组件-cookie,session)
昨日内容回顾 1 json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy() ...
- 2.1博客系统 |基于form组件和Ajax实现注册登录
基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...
- BBS-基于forms组件和ajax实现注册功能
http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...
- 3- 功能2：基于forms组件和ajax实现注册功能
1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...
随机推荐
- Ros指令集
rospack = ros+pack(age) : provides information related to ROS packages rosstack = ros+stack : provid ...
- 关于A类，B类，C类IP地址的网段和主机数的计算方法
关于A类,B类,C类IP地址的网段和主机数的计算方法 IP地址是一个32位的二进制数,由四个八位字段组成.每个IP地址包括两部分:一部分为网络标识(网络号),一部分为主机标识(主机号). A类地址前8 ...
- SQL获取时间戳流水号
流水号生成规则: 1:流水号总长度为22位数 2:流水号总共分三部分:标头(2位)+ 时间戳(YYYYMMDDHHmmSSsss共17位)+ 随机码(3位) 举例流水号:SN2015081210240 ...
- Luogu 3521 [POI2011]ROT-Tree Rotations
BZOJ 2212 从下到上线段树合并. 考虑到每一个子树内部产生的贡献不可能通过换儿子消除,所以一次更换只要看看把哪个儿子放在左边产生的逆序对数少就可以了. 逆序对数可以在线段树合并的时候顺便算出来 ...
- Luogu 3466 [POI2008]KLO-Building blocks
BZOJ 1112. 题意相当于在一个长度为$k$的区间内选择一个数$s$使$\sum_{i = 1}^{k}\left | a_i - s \right |$最小. 很显然是中位数. 然后只要写一个 ...
- 使用bat一键打开java、jar、py文件
直接运行jar是没有命令行窗口的,如果想有命令行窗口,一般来说是要 win+r 运行cmd,定位到所在目录,然后用命令行执行 java -jar xxx.jar 而对于python,打开py文件也是麻 ...
- WordCount编码与测试
1. github项目地址:https://github.com/wwwwu/WordCount 2.PSP表格: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning ...
- SPOJ - AMR11H Array Diversity (水题排列组合或容斥)
题意:给定一个序列,让你求两种数,一个是求一个子序列,包含最大值和最小值,再就是求一个子集包含最大值和最小值. 析:求子序列,从前往记录一下最大值和最小值的位置,然后从前往后扫一遍,每个位置求一下数目 ...
- [译]Javascipt中的Strings
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...