Ajax 异步局部刷新
???AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ???通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ???传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。实现json 字符串与 JavaScrip 对象得相互转换 JSON.parse()和 JSON.stringify()
1.序列化（将JavaScrip 转换为 json）使用 JSON.stringify()
console.log(JSON.stringify({'name':"baolin"}));2.反序列化（将json转换为JavaScrip）使用 JSON.parse()
console.log(JSON.parse('{"name":"baolin"}'));Csrf跨站请求伪造
向Django后台提交数据时，需要csrf_token验证所以需要定义该键值对； 设置Csrf验证以及向后端传送数据
1.定义csrf_token
{% csrf_token %}
2.伪造键值对向后端发csrfmiddlewaretoken 键值对
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script></head><body><p> ???<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="ret"> ???{% csrf_token %} ???<input id="cal" type="button" value="求和"></p><script> ???$("#cal").click(function () { ???????var num1=$(".num1").val(); ???????// 获取 input 输入的 val值 ???????var num2=$(".num2").val(); ???????$.ajax({ ???????????url:"/cal/", ???????????????{# 发送 ajax 的url #} ???????????type:"post", ???????????????{# 请求方式为 post或get #} ???????????data:{ ?????????????????????{# date 表示向后端发送的值，如果没有数据需要发送可以省略 #} ???????????????"num1":num1, ???????{# 向后端提交得数据 #} ???????????????"num2":num2, ???????????????csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val() ???// 当使用POST提交数据是，需要scrf_token验证 （固定格式） ???????????}, ???????????success:function (data) { ??// 回调函数，如果该ajax执行成功返回该函数，date 为/send_ajax/返回的值 ???????????????????????????$(".ret").val(data) ????// 将返回得数据 写入到class 为 ret 得输入空中 ???????????} ???????}) ???});</script>3.urls.py
from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [ ???url(r'^admin/', admin.site.urls), ???url(r'^cal/', views.cal),]4.views.py
def cal(request): ???if request.method == "POST": ???????# 获取前端 ajax 传入得值 ???????num1 = request.POST.get("num1") ???????num2 = request.POST.get("num2") ???????????????# 将值转换为 int 类型 ???????ret = int(num1) + int(num2) ???????????????# 返回结果 ???????return HttpResponse(ret) ???return render(request,"cal.html")通过Ajax实现页面的登陆功能
1.urls.py 路由配置
from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [ ???url(r'^admin/', admin.site.urls), ???url(r'^login/', views.login), ???????????# 页面登陆窗口 ???url(r'^index/', views.index), ???????????# 页面首页窗口 ???url(r'^logout/', views.log_out), ????????# 退出用户 ???url(r'^reg/', views.reg), ???????????????# 添加用户 ???url(r'^set_pwd/', views.set_pwd), ???????# 修改当前用户密码]2.views.py 视图函数
from django.shortcuts import render, redirect, HttpResponsefrom django.contrib import authfrom django.contrib.auth.models import Userfrom django.contrib.auth.decorators import login_requiredimport jsondef login(request): ???if request.method == "POST": ???????username = request.POST.get("user") ???????password = request.POST.get("pwd") ???????# 验证 通过 ajax 获取的 用户密码是否正确 ???????users = auth.authenticate(username=username, password=password) ???????????????# 定义一个 字典，用于将数据 序列化 传给前端 ???????loginResponse={"user":None,"errorMsg":None} ???????if users: ???????????# 如果验证成功 定义 session 值 ???????????auth.login(request, users) ???????????# 将字典user 赋值 ???????????loginResponse["user"]=username ???????else: ???????????# 验证失败 在errorMsg 赋值 ???????????loginResponse["errorMsg"]="用户名或密码错误" ???????????????# 将字典返回给前端 ???????return HttpResponse(json.dumps(loginResponse)) ???return render(request,"login.html")# 使用Django自带得装饰器login_required 实现验证# 验证失败跳转到 /login/ 路径,否则返回 index.html 页面@login_required(login_url='/login/')def index(request): ???return render(request, "index.html")3.login.html 前端模板展示
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script></head><body>{#用户登录#}<form action=""> ???{% csrf_token %} ???<p>姓名 <input type="text" class="user"></p> ???<p>密码 <input type="password" class="pwd"></p> ???<input type="button" value="提交" class="loginBnt"><span class="errorInfo"></span></form><script> ???// ajax 用户登录 ???$(".loginBnt").click(function () { ???????$.ajax({ ???????????url:"/login/", ???????????type:"post", ???????????data:{ ???????????????user:$(".user").val(), ???????????????pwd:$(".pwd").val(), ???????????????csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val() ???????????}, ???????????success:function (data) { ???????????????// data 是后端接收到 json字符串 ???????????????var data=JSON.parse(data); ???{# 将json字符串序列化为js类型字典 #} ???????????????if(data["user"]){ ???????????????????location.href="/index/"; ???{# 如果登录成功，在前端进行页面跳转 #} ???????????????} ???????????????else { ???????????????????console.log(data["errorMsg"]); ???????????????????var error_msg = data["errorMsg"]; ??????????????????????{# 如果登录不成功，取出后端发挥的错误信息 #} ???????????????????$(".errorInfo").html(error_msg).css("color","red"); ????{# 将错误信息放到按钮后面 #} ???????????????????setTimeout(function () { ???????????{# 3秒钟后 让提示信息消失 #} ???????????????????????$(".errorInfo").html(""); ???????????????????},3000) ???????????????} ???????????} ???????}) ???})</script></body></html>####################index.html 模板<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???????<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> ???????<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> ???????<!-- 可选的 Bootstrap 主题文件（一般不用引入） --> ???????<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> ???????<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> ???????<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head><body> ???<nav class="navbar navbar-inverse">{# ???????#} ???????<!-- Collect the nav links, forms, and other content for toggling --> ???????<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> ?????????<ul class="nav navbar-nav navbar-right"> ???????????<li><a href="#">{{ request.user }}</a></li> ???????????<li><a href="/logout/">注销</a></li> ???????????<li><a href="/reg/">添加用户</a></li> ???????????<li><a href="/set_pwd/">修改密码</a></li> ?????????</ul> ???????</div><!-- /.navbar-collapse --> ???</nav></body></html>Ajax 异步局部刷新
原文地址：http://www.cnblogs.com/baolin2200/p/7944059.html