简介
向服务器发送请求的几种方式：
1. 地址栏输入URL并回车 GET
2. a标签 href属性 GET
3. form表单 action属性 method属性 submit按钮 GET/POST
4. Ajax异步请求，局部刷新
AJAX使用Javascript技术向服务器发送异步请求。
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
(异步请求客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求)
常见应用场景：
- 搜索引擎根据用户输入的关键字，自动提示检索关键字。
- 注册时候的用户名的查重。
当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。整个过程中页面没有刷新，只是刷新页面中的局部位置而已！当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
AJAX基本语法：
$.ajax({
url: "", // 控制往哪里提交，请求url,没有ip地址和端口默认脚本所在页面的。
type: "POST", // 请求的方法
data: {}, // 请求的参数
success:function(arg){
// 回调函数，收到响应之后要做的事儿
}
})
示例：
1、简单的请求，ajax向服务器请求数据，服务端返回结果ok，通过DOM操作显示在页面上
- 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(){
//发送Ajax请求
// 点击按钮，发送请求，对应url和请求方式，
// /test_ajax/接受之后将结果返回给ajax的data，data执行回调函数不全局刷新，操作dom
$.ajax({
url:"/test_ajax/",
type:"get",
success:function(data){
console.log(data);
$(".content").html(data)
}
})
});
- url文件
path('test_ajax/', views.test_ajax),
- views文件
def test_ajax(request):
print(request.GET)
return HttpResponse("hello")
2、登录验证，form表单获取输入用户名和密码，ajax将数据打包发送服务端请求验证，服务端从数据库中查询比对，返回json格式结果，浏览器端ajax解析结果并显示在页面上。
- html
<form>
用户名 <input type="text" id="user">
密码 <input type="password" id="pwd">
<input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>
。。。。。。
$(".login_btn").click(function(){
$.ajax({
url:"/login/",
type:"post",
data:{
"user":$("#user").val(),
"pwd":$("#pwd").val(),
},
success:function(data){
console.log(data); // data是服务器端返回数据，不是发送给服务器的数据data,为 json字符串，需要解析。
var data=JSON.parse(data);// 服务器返回数据，在浏览器端需要反序列化，成了object {}类型，点语法取值。
console.log(data); // object
console.log(typeof data);
if (data.user){
location.href="http://www.baidu.com"
}
else {
$(".error").html(data.msg).css({"color":"red","margin-left":"10px"})
}
}
})
- views
def login(request):
print(request.POST)
user=request.POST.get("user")
pwd=request.POST.get("pwd")
user=User.objects.filter(name=user,pwd=pwd).first()
res={"user":None,"msg":None}
# 要返回给浏览器端结果，python的字典结构传给浏览器端js语言的object结构，两种语言之间传递，需要序列化
if user:
res["user"]=user.name
else:
res["msg"]="username or password wrong! "
import json
return HttpResponse(json.dumps(res))
3、form表单上传文件
整个流程：浏览器输入上传文件的url发送服务器，服务器接views视图函数收到浏览器get请求，返回上传文件页面html，form表单在浏览器端获取到文件之后，submit给action的url，默认当前路径给服务端，服务端views视图函数检测到post请求，获取request文件写入服务端，返回结果。
<h3>基于form表单的文件上传</h3>
{#文件上传，加enctype="multipart/form-data"，不然上传不成功，文件上传至 request.FILES#}
<form action="" method="post" enctype="multipart/form-data">
用户名<input type="text" name="user">
头像 <input type="file" name="avatar">
<input type="submit">
</form>
def file_put(request):
if request.method=="POST":
print("body",request.body) # 请求报文中的请求体
print("POST",request.POST) # if contentType==urlencoded ,request.POST才有数据
print(request.FILES)
file_obj=request.FILES.get("avatar") # 取出文件对象，服务器端写文件，注意文件名
with open(file_obj.name, "wb") as f:
for line in file_obj:
f.write(line)
return HttpResponse("OK")
return render(request,"file_put.html")
form表单注意：
- form表单enctype决定数据编码格式。
默认是enctype=“application/x-www-form-urlencoded”。
（请求协议：
https://blog.youkuaiyun.com/Light__1024/article/details/87969132#_18）
ContentType指的是请求体的编码类型，application/x-www-form-urlencoded，是最常见的 POST 提交数据的方式。浏览器的 form表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
请求体的数据编码格式为a=1&b=2&c=3，服务器收到请求后会首先检查ContentType，会按照这种格式解码，拿到相应的键和值。
-
文件上传：form表单的文件上传，一定要加
enctype="multipart/form-data"，<form action="" method="post" enctype="multipart/form-data">
ajax注意：
- 无论是form还是ajax，都有一个默认的请求头urlencoed。发送数据以键值对形式。ajax可以定义以json格式发送，data需要转换下格式，服务端接收数据时需要解析。
contentType:"application/json",定义以json格式
$.ajax({
url:"",
type:"post",
data:{
a:1,
b:2
},
success:function(data){
console.log(data)
}
})
$.ajax({
url:"",
type:"post",
{#无论是form还是ajax，都有一个默认的请求头urlencoed#}
{#按照某种格式编码之后放在请求体中#}
{#contentType:"application/json",以json格式#}
contentType:"application/json",
data:JSON.stringify({
a:1,
b:2
}),
success:function(data){
console.log(data)
}
})
-
服务器端接受浏览器端ajax发送请求时，注意request.POST取值，只有
contentType==urlencoded才适用。print("POST",request.POST) # if contentType==urlencoded ,request.POST才有数据如果form表单或者ajax定义了格式，取数据会在
request.body中，：print("body",request.body) # 请求报文中的请求体 -
如果是上传文件，form或者ajax上传文件，服务端接收数据需要在
request.FILES取数据
file_obj=request.FILES.get("avatar") # 取出文件对象，服务器端写文件，注意文件名
- ajax上传文件需要的格式：
<h3> 基于Ajax文件上传</h3>
<form action="" method="post">
用户名<input type="text" id="user">
头像 <input type="file" id="avatar">
<input type="button" class="btn" value="Ajax">
</form>
。。。。。
$(".btn").click(function(){
var formdata=new FormData();
formdata.append("user",$("#user").val());
{#注意获取上传文件发送给服务端时的语法：$("#avatar")[0].files[0] #}
formdata.append("avatar",$("#avatar")[0].files[0]);
$.ajax({
url:"",
type:"post",
{#不加下面这两个就报错，不做预处理#}
contentType:false,
processData:false,
data:formdata,
success:function(data){
console.log(data)
}
})
})
总结：
- form表单发送数据 ，ajax发送数据，默认键值对，此时编码格式
contentType==urlencoded，服务端取数据的方法：request.POST - form表单上传文件，加
enctype="multipart/form-data"，ajax上传文件有固定样式new FormData()，此时服务端取文件的方法：request.FILES - ajax定义以json格式发送数据时需定义并转换格式：
contentType:"application/json", data:JSON.stringify({ a:1, b:2 })
此时服务端取数据的方法：request.body需要解析。其实request.body一直都有数据，json格式时这样取，键值对形式数据直接POST比较方便，但不代表body没有数据。
https://www.cnblogs.com/liwenzhou/p/8718861.html
https://www.cnblogs.com/alice-bj/p/9092790.html
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
