初始Ajax
先来回顾下Json
import json ######################################json序列化###################### # d={"name":"egon","age":12} # # data=json.dumps(d) # # print(data) # print(type(data)) # f=open("a.txt","w") # # f.write(data) # f.close() ################################ 反序列化################################## # f=open("b","r") # # data=f.read() # data=json.loads(data) # print(data) # print(type(data)) #++++++++++++++++++++++++++++++++++++ i=10 #数字 s='hello' #字符串 l=[111,222,333] #列表 b=True #布尔值 t=(1,2,3) #元祖 d={'name':'yuan'} #字典 print(json.dumps(i)) # 10 print(json.dumps(s)) # "hello" print(json.dumps(l)) # [111, 222, 333] print(json.dumps(t)) # [1, 2, 3] print(json.dumps(d)) # {"name": "yuan"} print(json.dumps(b)) # true
注意：loads是可以loads出任何Json的数据，loads出来的是字典。列表，元祖dumps是数组。
Js也支持单引号。
特点：
Json是JS的子集；
JSon只认双引号；
JSon一定是一个字符串；
反序列化的是Json的对象；
我们一般说的JSon是指Json的字符串
parse()当于loads
stringfy(():相当于dumps
XML很重要（金融，Java等领域）
JSon的序列化与反序列化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script>
// JS 的json序列化与反序列化方法
// parse()
s='{"name":1}';
var data=JSON.parse(s);
console.log(data);
console.log(typeof data);
// stringfy
s2={'name':'yuan'};
console.log(JSON.stringify(s2)) // {"name":"yuan"}
</script>
</head>
<body>
</body>
</html>
课上笔记：
前端向后端发送数据： GET： 地址栏 a标签 form post： form AJAS：是JS的一种向后端服务器发送数据技术 json： 数据交换格式 json是JS的子集 json只认双引号 json一定是一个字符串 {"name":[111,222,333],"age":[111222,123,12312]} AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。 功能：是JS的一种向后端服务器发送数据技术 特点： 1 异步交互 2 局部刷新 写在js文件，或者<script>; jquery实现的Ajax $.ajax({ url: "" ,// 请求路径 type:"" ,// 请求方式 success：function(data){ } }) 参数： data：{"name":"yuan"} if processData=false：不对数据做预处理，不涉及编码类型 if processData=true： 设计编码类型： contentType：默认值: "application/x-www-form-urlencoded"
课上代码：
views代码：
from django.shortcuts import render,HttpResponse # Create your views here. def index(request): # import time # time.sleep(10) return render(request,"index.html") def get_OK(request): return render(request,"get_OK.html") def get_ajax(request): username=request.GET.get("name")#获取前端发的数据 password=request.GET.get("pwd") response={"flag":False}#定义一个flag if username=="yuan" and password=="123": response["flag"]=True import json import time time.sleep(10) return HttpResponse(json.dumps(response))#返回一个json格式
html代码（用json做数据的验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<a href="/get_OK/">点击</a><span class="error"></span>
<hr>
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
$(".Ajax_send").click(function () {
// ajax请求
$.ajax({
url:"/get_ajax/",
type:"GET",
data:JSON.stringify({
name:$(":text").val(),
pwd:$(":password").val()
}), // 请求数据 ，是js数据 ?name=yuan&pwd=123
contentType:"application/json",
success:function (data) {
var data=JSON.parse(data);
console.log(data);
console.log(typeof data);
// $(".error").html(data)
if(!data["flag"]){
$(".login_error").html("用户名或者密码错误")
}
}
})
})
</script>
</body>
</html>