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 ...
随机推荐
- sql编写注意
DROP TABLE IF EXISTS `imooc_pro`; CREATE TABLE `imooc_pro`( `id` int unsigned auto_increment key, `p ...
- opencv3.2加载图片
#include <opencv2/opencv.hpp>#include <iostream> using namespace cv;using namespace std; ...
- varnish安装
安装pcrevarnish 依赖pcre进行url正则匹配. cd pcre-8.12./configure --prefix=/usr/local/make&&make instal ...
- R: 给 dataframe 的某列赋值、分组、因子化
################################################### 问题:给某一列赋值.分组.分类.因子化 18.4.24 如何把 data.frame 中的某 ...
- 精美3D中国象棋
本人2013年的巅峰之作,现在已经完全免费放送.象棋界面的史诗革命.当前下载版本仅支持Windows 平台. 操作: 方向键的 上,下,左,右 控制棋盘翻转.Home 键回到初始状态,End按键回到平 ...
- [转载]应用 Valgrind 发现 Linux 程序的内存问题
应用 Valgrind 发现 Linux 程序的内存问题 如何定位应用程序开发中的内存问题,一直是 inux 应用程序开发中的瓶颈所在.有一款非常优秀的 linux 下开源的内存问题检测工具:valg ...
- [转]CMD命令提示符窗口中的快捷键、小技巧和常用命令
转至:https://wenku.baidu.com/view/d5d2b7ca360cba1aa811dac6.html 快捷键: F1:按F1一次,命令提示符向后切换到已经执行过的命令字符.如果 ...
- Android camera调用出现错误解决方法
开发时,先是使用三星的手机测试,发现一切正常: 但是到了小米的手机的时候,发现图片很模糊,发现是设置camera.setParameters(parameters);报错导致用的是默认的最小的分辨率, ...
- 在WinForm中使用Web Services 来实现 软件 自动升级( Auto Update ) (C#)
winform程序相对web程序而言,功能更强大,编程更方便,但软件更新却相当麻烦,要到客户端一台一台地升级,面对这个实际问题,在最近的一个小项目中,本人设计了一个通过软件实现自动升级技术方案,弥补了 ...
- sqlserver的索引创建
随着系统数据的增多,一些查询逐渐变慢,这时候我们可以根据sqlserver的执行计划,查看sql的开销,然后根据开销创建索引. 索引有聚集索引与非聚集索引. 聚集索引:聚集索引在存储上是按照顺序存储的 ...