1、json学习css
一、json(Javascript Obiect Notation,JS对象标记)是一种轻量级的数据交换格式。html
（1）python中的序列化(dumps)与反序列化(loads)前端
import json
ret=json.dumps({'name':'alex'})
print(ret) #结果：{"name": "alex"}
ret=json.loads('{"name":"alex"}')
print(ret["name"]) #结果：alex
（2）JS中的序列化(stringify)与反序列化(parse)python
JSON.stringify():用于将一个JavaScript对象转换为JSON字符串jquery
JSON.parse():用于将一个JSON字符串转换为JavaScript对象ajax
<script>
//===========js中的json的序列化=======
s2={'name':'yuan'};
console.log(JSON.stringify(s2),typeof JSON.stringify(s2)) //string
//===========js中的json反序列化===========
s = '{"name":1}';
var data = JSON.parse(s);
console.log(data);
console.log(typeof data); //object
</script>
2、Ajax简介django
一、介绍json
ajax：前端向后端发送数据的一种方式后端
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即便用Javascript语言与服务器进行异步交互，传输的数据为XML（固然，传输的数据不仅是XML）。浏览器
同步交互：客户端发出一个请求后，须要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能够发出第二个请求。
Ajax的特色：
异步交互： 当请求发出后，浏览器还能够进行其余操做，无需等待服务器的响应！
局部刷新： 整个过程当中页面没有刷新，只是刷新页面中的局部位置而已！
二、优势
AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
由于服务器响应内容再也不是整个页面，而是页面中的局部，因此AJAX性能高；
3、jQuery实现的ajax
urls.py文件内容:
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', views.index), url(r'^user/valid', views.user_valid), ]
views.py文件内容:
from django.shortcuts import render,HttpResponse,redirect
from .models import *
def index(request):
return render(request,"index.html",locals())
def user_valid(request):
# name=request.GET.get("name")
name=request.POST.get("name")
ret=User.objects.filter(name=name)
res={"state":True,"msg":""}
if ret:
res["state"]=False
res["msg"]="该用户已存在"
import json
return HttpResponse(json.dumps(res))
index.html文件内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
<p>用户名：<input type="text" id="user"><span></span></p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$("#user").blur(function(){
$.ajax({
url: "/user/valid",
type: "post",
data: {
"name":$("#user").val(),
'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(), {#防止出现404报错#}
},
success: function(data){
var data = JSON.parse(data);
console.log(data);
console.log(typeof data);
if (!data.state){
$('.error').html(data.msg).css("color", "red");
// location.href="http://www.baidu.com"
}
}
})
})
</script>
</body>
</html>
urls.py文件内容:
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login/', views.login), url(r'^user/valid', views.user_valid), ]
views.py文件内容:
from django.shortcuts import render,HttpResponse,redirect
from .models import *
def user_valid(request): #处理从html页面获得的数据
num1 = request.POST.get("num1")
num2 = request.POST.get("num2")
ret=int(num1)+int(num2)
return HttpResponse(str(ret)) #返回的字符串类型
def login(request):
if request.method=="POST":
user=request.POST.get("user")
pwd=request.POST.get("pwd")
user=UserInfo.objects.filter(user=user,pwd=pwd).first()
if user:
obj=HttpResponse("登陆成功")
obj.set_cookie("is_login_yuan",True)
obj.set_cookie("username",user.user)
return obj
return render(request,'login11.html')
login11.html文件内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button>submit</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(".cal").click(function () {
$.ajax({
url:"/user/valid", {#数据发送到/user/valid，即执行函数user_valid#}
type:"post",
data:{
"num1":$("#num1").val(), {#取到输入的num1的值#}
"num2":$("#num2").val(), {#取到输入的num2的值#}
'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(),
},
success:function (data) {
if (!data.state){
$('#ret').val(data) {#将函数user_valid返回的值填到id为ret的输入框中做为获得的结果#}
}
}
})
})
</script>
</body>
</html>
5、cookie的简单操做
cookie实现了浏览器保存用户登陆状态信息，保证了用户只需登陆一次就能够，不须要每一个访问页面都登陆
models.py的文件内容：
from django.db import models class User(models.Model): name=models.CharField(max_length=32) age=models.IntegerField() class UserInfo(models.Model): user=models.CharField(max_length=32) pwd=models.CharField(max_length=32)
views.py文件内容:
from django.shortcuts import render,HttpResponse,redirect
def index(request):
ret=request.COOKIES.get("is_login_yuan") #不能直接访问index路径，判断是否登陆
if not ret:
return redirect("/login/")
username = request.COOKIES.get("username")
return render(request,"index.html",locals())
def login(request):
if request.method=="POST":
user=request.POST.get("user")
pwd=request.POST.get("pwd")
user=UserInfo.objects.filter(user=user,pwd=pwd).first()
if user:
obj=HttpResponse("登陆成功")
obj.set_cookie("is_login_yuan",True)
obj.set_cookie("username",user.user)
return obj #返回：登陆成功
return render(request,'login.html')
urls.py文件内容:
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login/', views.login), url(r'^index/', views.index), ]
login.html文件内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
{% csrf_token %}
用户名：<input type="text" name="user">
密码：<input type="password" name="pwd">
<input type="submit">
</form>
</body>
</html>