django框架进阶-AJAX-长期维护
################## 预备知识---json #######################
预备知识，json 什么是json？这是一种数据格式，和语言没有关系，
为什么会有json这种数据格式，就是为了可以实现跨语言的传输，比如前后端的传输，前端是js，后端可以是c，go，python，java，php，等等， 不同的后端语言怎么和前端语言做交互呢？
现在企业基本都是前后端分离的，前端需要什么数据，你就返回什么数据，就可以了，前端框架Vue，后端就是写API，只写API也挺麻烦的，也不简单， json的出现就是为了替代xml的，json更加的简洁清晰，
################## AJAX的基本认识 #######################
我们学过的发请求的方式：
1，直接在浏览器输入网址，回车，这是一个get请求，
2，a标签，get请求
3，form表单，post请求，和get请求都可以发，
4，AJAX，也可以发get请求，也可以发post请求，
四种都是不依赖的，独立的，
ajax的认识：
AJAX的基本认识
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
ajax没有什么复杂的，就是js发请求的一种方式而已。
这是为了使用js传输xml到服务器而产生的技术，现在基本都是使用AJAX传递json数据格式了，是原生js的一门技术，但是我们写的时候不使用原生的js，非常麻烦，所以我们使用jQuery ######################
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求； 同步就是要排队，需要等，使用AJAX就解决了这个问题
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。异步就是可以一起走，不能等 #####################################
AJAX特点：
1，异步，就是不用等了，最重要的特点，
2，局部刷新浏览器，（偷偷发请求了，）
比如注册的时候，输入已经存在的用户名，点击注册，会提示该用户名已经注册，但是页面是没有刷新的，
但是怎么知道该用户已经注册的，就是往数据库去校验了，这就是局部刷新， ###############################
AJAX常用的场景：
1，注册页面，
输入用户名，点击注册，会偷偷的使用AJAX发送请求，
输入用户名，失去光标，会偷偷的使用AJAX发送请求，
2，编辑页面，可以编辑之后马上就把新数据填充进来，
################## AJAX #######################
视图：
from django.shortcuts import render, HttpResponse # Create your views here. def index(request):
return render(request, "index.html") def ajax_add(request):
print(request.GET)
print(request.GET.get("i1"))
print(request.GET.get("i2")) i1 = int(request.GET.get("i1"))
i2 = int(request.GET.get("i2"))
ret = i1 + i2
return HttpResponse(ret) def ajax_add3(request):
print(request.POST)
print("-" * 120)
i1 = int(request.POST.get("i1"))
i2 = int(request.POST.get("i2"))
ret = i1 + i2
return HttpResponse(ret) def test(request):
# import time
# time.sleep(5)
url = "http://p7.yokacdn.com/pic/YOKA_HZP/2018-01-19/U10089P42TS1516351813_11903.jpg"
# return HttpResponse(url)
# return render(request, "index.html")
return HttpResponse("http://www.luffycity.com") from app01 import models # 序列化的问题，
def persons(request):
ret = models.Person.objects.all() # person_list = []
# for i in ret:
# person_list.append({"name": i.name, "age": i.age})
# print(person_list)
# import json
# s = json.dumps(person_list)
# print(s)
# 我们不使用这种麻烦的方法进行序列化，django给我们想好了， # from django.core import serializers
# s = serializers.serialize("json", ret)
# print(s)
# return HttpResponse(s) return render(request, "sweetalert_demo.html", {"persons": ret}) def delete(request):
import time
time.sleep(3)
del_id = request.POST.get("id")
models.Person.objects.filter(id=del_id).delete()
return HttpResponse("删除成功！")
ajax测试的页面：
<!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>AJAX局部刷新实例</title>
</head>
<body> <input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3"> <input type="button" value="AJAX提交" id="b1">
<input type="button" value="AJAX提交3" id="b3"> <input type="button" value="呵呵哒" id="b2"> <form action="/form_add/" method="post">
{# 本质这个{% csrf_token %}也是一个input框， #}
{% csrf_token %}
<input type="text" name="user">
<input type="password" name="pwd">
<input type="submit">
</form> <script src="/static/jquery-3.3.1.js"></script>
<script src="/static/setupajax.js"></script>
{#导入了这个文件，就不需要在发送ajax请求的时候，再传递 csrftoken 了，这个文件会把csrftoken以一种方式塞到请求头里面，#}
<script> //使用get请求，
$("#b1").on("click", function () {
// 点击 id是b1的按钮要做的事儿
var i1 = $("#i1").val();
var i2 = $("#i2").val();
// 往后端发数据
$.ajax({
url: "/ajax_add/",
type: "get",
data: {"i1": i1, "i2": i2},
//这个函数用来接收请求
success: function (arg) {
{#alert(arg);#}
// 把返回的结果填充到 id是i3的input框中
$("#i3").val(arg);
}
})
}); //使用post请求，使用post请求也是要校验csrftoken的
$("#b3").on("click", function () {
// 点击 id是b1的按钮要做的事儿
var i1 = $("#i1").val();
var i2 = $("#i2").val();
// 找到页面上csrf_token
// var csrfToken = $("[name='csrfmiddlewaretoken']").val(); //使用这种方法，获取到csrftoken，
// 往后端发数据
$.ajax({
url: "/ajax_add3/",
type: "post",
data: {"i1": i1, "i2": i2},
success: function (arg) {
{#alert(arg);#}
// 把返回的结果填充到 id是i3的input框中
$("#i3").val(arg);
}
})
}); // 复习jQuery
$("#b2").on("click", function () {
$.ajax({
url: "/test/",
type: "get",
success:function (a) {
location.href = a; //这是跳转到另外一个页面，
// alert(a); //如果你返回的是一个页面，这个弹框中就是html
// 在页面上创建一个标签
//var imgEle = document.createElement("img");
//imgEle.src = a;
// 把创建的img标签添加到文档中
//$("#b2").after(imgEle);
}
})
}) </script>
</body>
</html>
sweetalert测试的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert_demo</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<style>
.sweet-alert>h2 {
padding-top: 15px;
}
</style>
</head>
<body> <div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">person管理</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>name</th>
<th>age</th>
<th>生日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for p in persons %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ p.id }}</td>
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.birthday|date:'Y-m-d' }}</td>
<td>
<button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
</td>
</tr>
{% endfor %} </tbody>
</table>
</div>
</div>
</div> <script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script src="/static/setupajax.js"></script>
<script>
// 找到删除按钮绑定事件
$(".del").on("click", function () {
var $trEle = $(this).parent().parent();
var delId = $trEle.children().eq(1).text(); swal({
title: "你确定要删除吗？",
text: "一旦删除就找不回来了",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-warning",
confirmButtonText: "确认",
cancelButtonText: "取消",
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function(){
// 向后端发送删除的请求
$.ajax({
url: "/delete/",
type: "post",
data: {"id":delId},
success:function (arg) {
swal(arg, "你可以跑路了！", "success");
$trEle.remove();
}
}); });
})
</script>
</body>
</html>
ajax发送post请求，需要加上csrftoken，我们可以把这个放入请求头中，需要加一个js文件，
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
url文件;
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'^ajax_add/$', views.ajax_add),
url(r'^ajax_add3/$', views.ajax_add3),
url(r'^test/$', views.test), url(r'^persons/$', views.persons),
url(r'^delete/$', views.delete),
]
model文件;
from django.db import models # Create your models here. class Person(models.Model):
name = models.CharField(max_length=16)
age = models.IntegerField()
birthday = models.DateField(auto_now_add=True) def __str__(self):
return self.name
################# AJAX #######################
################## AJAX #######################
django框架进阶-AJAX-长期维护的更多相关文章
- django框架进阶-中间件-长期维护
################## 为什么使用中间件? ####################### 先说几个需求, 1,url的白名单,url=[ "XX"] ...
- django框架进阶-分页-长期维护
################## 分页 ####################### 分页, django有自己内置的分页,但是功能不是很强大,所以自己写一个分页, web页面数据非常 ...
- django框架进阶-admin-长期维护
############### django--admin的使用 ################ # django后台管理: # 第一步: # 在settings文件中修改语言和时区 L ...
- Django框架 之 Ajax
Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...
- Django框架09 /ajax、crsf、settings导入
Django框架09 /ajax.crsf.settings导入 目录 Django框架09 /ajax.crsf.settings导入 1. ajax概述 2. ajax应用 3. ajax上传文件 ...
- Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
- django框架进阶-auth认证系统-长期维护
################## django的认证系统 ####################### 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要 ...
- django框架进阶-使用缓存-长期维护
############### django-缓存页面 ############### ########################################### # 全站缓存, ...
- django框架进阶-ModelForm组件-长期维护
############################################################ """ 通常在Django项目中,我们编写的大部 ...
随机推荐
- A - Period（kmp的next数组的应用）
For each prefix of a given string S with N characters (each character has an ASCII code between 97 a ...
- mysql的show status和show global status区别在哪
show status 本次会话的参数状态show global status 本次MYSQL服务开启(或重置)到现在总请求数
- html_js_jq_css
// ----- JQ $(function(){$(div').bind('mouseout mouseover', function () {// 移入和移出分别执行一次alert('bind 可 ...
- 树状数组--模版1和2 P3368、P3374
题目描述 如题,已知一个数列,你需要进行下面两种操作: 将某一个数加上 x 求出某区间每一个数的和 输入格式 第一行包含两个正整数 n,m,分别表示该数列数字的个数和操作的总个数. 第二行包含 n 个 ...
- 关于js返回上一页的实现方法
以前在提交表单的时候,如果提交出错返回的时候信息内容全没了,我不知道要怎么保存,就开始了那种最愚蠢的做法,将填写的数据设置到session中,让后取出来用,不过没有试成功,总是有错,无意之中在我那本j ...
- UVA-10074 最大子矩阵 DP
求出大矩阵里面全为0的最大子矩阵 我自己用的个挫DP写的,感觉写的不是很好,其实可以再优化,DP想法就是以 0 0 到当前 i j 为整体矩阵考虑,当前 i j就是从 i-1 j或者 i,j-1那里最 ...
- MyBatis从入门到精通(第5章)：5.4 Example 介绍
jdk1.8.MyBatis3.4.6.MySQL数据库5.6.45.Eclipse Version: 2019-12 M2 (4.14.0) MyBatis从入门到精通(第5章):MyBatis代码 ...
- LeetCode No.160,161,162
No.160 GetIntersectionNode 相交链表 题目 编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 输入:intersectVal ...
- centos 部署WGCLOUD
服务端: 一.安装jdk 1.查看安装配置 jdk: 命令:java -version 2.查看系统是否自带 jdk rpm -qa |grep java rpm -qa |grep jdk rp ...
- Python opencv计算批量图片的BGR各自的均值
#coding:utf-8 #第一种方式 很慢很慢 自己写的如何计算均值 ''' import cv2 import os def access_pixels(frame): print(frame. ...