58Ajax
Ajax
1 .客户端浏览器通过执行一段JS代码向服务器发送请求,服务器路由对应的视图函数返回一个json字符串作为响应,
浏览器接受响应后会触发该ajax请求的回调函数success,参数为响应字符串,success内通过DOM操作讲结果反映到页面上,
实现局部刷新,不再向之前的请求会将响应覆盖整个页面上。
2 .ajax请求不要返回render,redirect这些响应,就返回json字符串的HttpResponse!
1.AJAX 发送请求的两大特点:
1.异步交互
2.局部刷新
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
2. ajax 提交请求的两种方式
1.get
2.post
3.在前后端数据处理函数
python:
json.dumps()
json.loads()
JS:
JSON.stringfy([]) -------- json字符串
JSON.stringfy({}) -------- json字符串
JSON.stringfy('') -------- json字符串
JSON.parse(json字符串) ----> JS数据类型(数组,对象)
对数据处理的另一种形式:
1.python:
视图文件 views.py 文件中:
from django.http import JsonResponse
def login(request):
from django.http import JsonResponse
if request.method=="GET":
return render(request,"login.html")
else:
res={"user":None,"msg":None}
user=request.POST.get("user")
pwd=request.POST.get("pwd")
user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()
if user_obj:
# 登陆成功!
res["user"]=user_obj.user
else:
# 登录失败
res["msg"]='用户名或者密码错误!'
return JsonResponse(res)
2.前端页面ajax 代码
<script>
$(".login_btn").click(function () {
// 发送Ajax请求
$.ajax({
url:"/login/",
type:"post",
data:{
user:$(".user").val(),
pwd:$(".pwd").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
success:function (res) {
console.log(res);
console.log(typeof res); # 由于服务端用的是JsonResponse(res)返回的数据,前端得到的数据类型是对象类型,直接点就可以取值,前端不需要用JSON.parse())
if(res.user){
location.href="/books/" // 跳转到books 页面
}else{
$('.error').html(res.msg).css("color","red");
setTimeout(function () {
$('.error').html('')
},1000)
}; }
}) })
</script>
4.客户端浏览器给服务端发请求的形式:
1 地址栏输入url 回车 默认是get请求方式
2 form表单,用户点击submit按钮
--- get
--- post
3 超链接标签(a标签) 默认是get请求方式
4 Ajax请求
---get
---post
(1) 异步
(2) 局部刷新
5.文件上传
请求头 ContentType指的是请求体的编码类型,常见的类型共有3种:
(1)application/x-www-form-urlencoded
常见的post提交数据方式
form 表单默认时,不是设置enctype时
body 数据格式 user=yuan&age=22
(2)multipart/form-data
常见的post 提交数据方式
必须让 <form> 表单的 enctype
等于 multipart/form-data
(3)application/json
JSON 格式支持比键值对复杂得多的结构化数据
前端通过这个格式提交的数据,在后端 data =request.body中而不是在request.POST中,且得到的data为btyes 类型,需要decode 转化成json字符串格式,再通过json.loads(data)
前端:
<input type="button" class="ajax_btn" value="submit_json"> //js 代码:通过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)
}
})
})
视图中:
def put1(request):
print(request.POST)#
print(request.body)#ret =request.body
import json
data=json.loads(request.body.decode())
print(data,type(data))
return HttpResponse("OK")
2.基于ajax 方式的文件上传
注意的点:需要注销配置中的安全机制的中间键,或者前端页面上{% csrf_token %} ,ajax data字典中加上 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']") j键值 不然会报错,下面代码是用的注销的中间键
1.前端代代码:
<body>
<input type="file" class="file"><input type="text" class="user"><input type="button" value="提交" class="button">
{#{% csrf_token %}#}
<script>
$(".button").click(function () {
alert(122);
var user =$(".user").val();
var file =$(".file")[0].files[0]; //$(".file")得到的是一个集合,$(".file")[0]取第一个file类型的input标签,然后点files方法,去其中的第一个
console.log(file);
//new 一个formdata对象
var formdata= new FormData();
// formdata 对象通过,append 方法 ,append("键”,"值”)
formdata.append("user",user);
formdata.append("file",file);
$.ajax({
url:"/file/",
type:"post",
contentType:false,
processData:false,
data:formdata,
success:function (res) {
console.log(res);
}
})
})
</script>
</body>
2.后端(需要再配置文件注释掉安全机制)
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
settings配置中注释掉
from django.contrib import admin
from django.urls import path
from app1 import views urlpatterns = [
path('admin/', admin.site.urls),
path('file/', views.file),
]
urls.py 文件中
视图中:
from django.shortcuts import render,HttpResponse # Create your views here. import os
def file(request): if request.method=="GET":
return render(request,"file.html") else: user = request.POST.get("user")
file_obj = request.FILES.get("file") #得到一个文件句柄
print(request.POST)
print(file_obj.name) #得到文件名 with open(os.path.join("media","images",file_obj.name),"wb") as f:
for line in file_obj:
f.write(line) return HttpResponse("上传成功!")
3.基于form 表单的文件上传
key:前端中,form表单中需要设置 enctype 属性 enctype="multipart/form-data"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.3.1.js"></script>
</head>
<body> <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="text" name="user"><input type="submit"> </form> </body>
</html>
视图:
#form 上传文件的视图
def file2(request):
if request.method=="GET":
return render(request,"file2.html") else:
print(request.POST)
# print(request.body)
# print(request.FILES)
file_obj=request.FILES.get("file")
with open(os.path.join("media","images",file_obj.name),"wb") as f:
for line in file_obj:
f.write(line)
return HttpResponse("上传成功")
6.ajax的请求流程
58Ajax的更多相关文章
随机推荐
- hihoCoder week20 线段树的区间修改
区间修改 区间查询 最后一场比赛前的无可救药的热身 #include <bits/stdc++.h> using namespace std; #define mid ((l+r)/2) ...
- P4609 [FJOI2016]建筑师
思路 裸的第一类斯特林数,思路和CF960G相同 预处理组合数和第一类斯特林数回答即可 代码 #include <cstdio> #include <cstring> #inc ...
- iframe初始化属性
<iframe id="user" src="xxx.html" frameborder="0" width="" ...
- 中文字符串和UTF-8编码字符串相互转换
中文字符串和UTF-8编码字符串相互转换 //UTF字符转换 var UTFTranslate = { Change: function(pValue) { ) { ).replace(/(%u)(\ ...
- 【Java】【集合】
[1. ]HashMap,LinkedHashMap,TreeMap对比 共同点: HashMap,LinkedHashMap,TreeMap都属于Map:Map 主要用于存储键(key)值(valu ...
- JAVA读取CSV文件到MySQL数据库中
maven项目pom配置: <dependency> <groupId>net.sourceforge.javacsv</groupId> <artifact ...
- _event
EventId 事件ID 请使用大于100的ID EventName 事件的名称,用于游戏中各种提示 NoticeText 事件开始时的弹窗内容 GossipText 功能宝石等菜单内容 Z ...
- python 安装pip
https://pip.pypa.io/en/stable/installing/
- module.exports小程序模块化,require
小程序模块化 可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块.模块只有通过 module.exports 或者 exports 才能对外暴露接口. tips:exports 是 mo ...
- C#引用出错
今天有朋友问我为什么自己引用了配置文件,但是还不能使用配置文件呢? 之后我查看他的项目,后来发现如下问题,并且总结引用文件流程如下: 引用文件的完整程序如下: 用配置文件举例 项目中的引用右击,然后点 ...