day059-60 ajax初识 登录认证练习 form装饰器, form和ajax上传文件 contentType
一.ajax 的特点
1.异步交互:客户端发出一个请求后，需要等待服务器响应结束后，
才能发出第二个请求
2.局部刷新:给用户的感受是在不知不觉中完成请求和响应过程.
二.ajax 模板示例 ($.ajax({}) )
1.urls.py文件中
from django.conf.urls import url
from django.contrib import admin
from app01 import views #引入views.py 文件
urlpatterns = [
# url(r'^admin/', admin.site.urls),
url(r'^login/', views.login,name='login'),
url(r'^home/', views.home,name='home'),
]
2.views.py 文件中
from django.shortcuts import render,HttpResponse,redirect #响应模块
from django.http import JsonResponse #django自带的 json加工模块
from app01 import models #数据库加工模块
from django.urls import reverse # 反向解析模块
import json #引入 json 模块
# Create your views here.
def home(request):
return render(request,'home.html')
def login(request):
if request.method == 'GET': # get请求 响应方式
return render(request,'login.html')
else:
a = {'status': None, 'home_url': None} #一个开始的状态
username = request.POST.get('user')
pwd = request.POST.get('password')
ret=models.name_pwd.objects.filter(name=username,password=pwd) #与数据库中的信息进行对比
if ret: # 数据库中是否存在数据
a['status'] = True #更改状态
a['home_url'] = reverse('home')
a_json = json.dumps(a) 转换成 json 格式的字符串
return HttpResponse(a_json)
else:
a_json = json.dumps(a)
return HttpResponse(a_json)
3.在 .html 中
{% load static %} #引入静态文件的路径
<!DOCTYPE html>
<html lang="zh-CN">
<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>
{% csrf_token %} #post 提交方式必须加的验证方式
<input type="text" class="d2">
<input type="password" class="d3">
<button class="d1">登录</button>
<span class="msg" style="color: red"></span> #预留添加字符串的地方
</body>
<script src="{% static 'js/jquery.js' %}"></script> #引入 js
<script>
$('.d1').click(function () { # 绑定点击事件
var name = $(".d2").val();
var pwd = $('.d3').val();
var csrf_token = $('input[name=csrfmiddlewaretoken]').val();
$.ajax({ #绑定 ajax 格式
url:"{% url 'login' %}", # 提交的路径
type:'post',
data:{'user':name,'password':pwd ,'csrfmiddlewaretoken':csrf_token}, # 给后端的数据
success:function (content) { 获得响应数据 (content是参数)
ret= JSON.parse(content); #将json格式的字符串 变为 前端格式的字符串
if (ret .status){
$('.msg').text('成功啦!'); #向预留的地方添加字符串
location.href = ret.home_url 跳转到相应路径
}
else {
$('.msg').text('失败了,检查一下自己输入的内容');
}
}
})
})
</script>
</html>
4.通过 json 转换格式的 三种方式
① 引入 json模块
1). 在后端文件 views.py中
2)将python类型的数据转换成 json 类型的数据
3).在前端文件 .html 中 将 json类型的数据转换成前端js类型
② 引入 django 自带的 json处理模块
1)在 views.py 文件中 引入模块
2).
3).在前端.html 文件中直接调用
③ 响应信息是 加消息头
1) 在 后端views.py文件中
2).在前端.html 文件中, 直接调用传过去的数据
三.请求头 (content_type)
1. application/x-www-form-urlencoded (默认)
请求信息用 "&" 连接
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性， 那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。
POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 user=yuan&age=22 #这就是上面这种contenttype规定的数据格式，后端对应这个格式来解析获取数据， 不管是get方法还是post方法，都是这样拼接数据，大家公认的一种数据格式，但是如果你contenttype 指定的是urlencoded类型，但是post请求体里面的数据是下面那种json的格式，那么就出错了， 服务端没法解开数据。
2.multipart/form-data (传输文件)
将文件分成一段一段的传输
3. application/json (json格式)
①请求信息与响应信息
②服务端指定为json 格式
③
四. 文件上传
1.基于表单的文件上传
①在 .html 文件中
{% load static %} #导入静态文件路径
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}"> #导入bootstrap
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal" method="post" action="{% url 'upload' %}" enctype="multipart/form-data"> #插入发送文件的 请求头
{% csrf_token %} #POST请求的验证
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="用户名" name="username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">头像</label>
<div class="col-sm-10">
<input type="file" id="inputPassword3" placeholder="文件" name="file_obj">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
②在view.py文件中
from django.shortcuts import render,HttpResponse
import os
from 文件上传 import settings #导入 setting.py 文件中的路径
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
username = request.POST.get('username')
file_obj = request.FILES.get('file_obj') #获取文件
file_name = file_obj.name #获取文件名
path = os.path.join(settings.BASE_DIR, 'statics', 'img', file_name) #拼接保存路径
with open(path,'wb')as f: #要保存到的文件位置
#for i in file_obj: #读取上传的文件
#f.write(i) #写入新文件 for chunk in file_obj.chunks(): #常使用的读取方式,数据大小可控 f.write(chunk)
return HttpResponse('ok')
2.基于 Ajax 的上传文件
① view.py 文件中获取方法 相同
② 在 前端.html 文件中
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% csrf_token %}
<div>
用户名:
<input type="text" name ='username'>
</div>
<div>
<input type="file" name="file_obj">
</div>
<button id="sub">提交</button>
</div>
</div>
</div>
</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
$("#sub").click(function () {
var name = $("input[name=username]").val();
var file = $('input[type=file]')[0].files[0]; #获取上传的文件
var csrf = $('input[name=csrfmiddlewaretoken]').val();
var formdata = new FormData(); #上传文件时需要的类型
formdata.append('username',name); #将请求的数据加入新类型中
formdata.append('file_obj',file);
formdata.append('csrfmiddlewaretoken',csrf);
$.ajax({
url:'{% url 'upload' %}',
type:'post',
data:formdata,
processData: false , // 不处理数据(必写)
contentType: false, // 不设置内容类型(必写)
success:function (response) {
}
})
})
</script>
</html>
引入js文件的方式上传文件(文件中的代码):
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
, name.length + ) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + ));
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);
}
}
});
五. Ajax请求设置csrf_token
1.通过获取隐藏的input标签中的csrfmiddlewaretoken值，
放置在data中发送。
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "chao",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
2.
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
3.通过获取返回的cookie中的字符串 放置在请求头中发送。
(在发送 json格式的时候只能通过这种方式)
注意：需要引入一个jquery.cookie.js插件。
<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
headers:{"X-CSRFToken":$.cookie('csrftoken')}, #其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加
})
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrftoken，并设置到请求头中
data: {"username": "chao", "password": 123456},
success: function (data) {
console.log(data);
}
})
六. json
七. sweetAlert 插件
1.插件下载 点击
2.引入插件
3.示例:
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.css' %}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert-master/lib/sweet-alert.less' %}">
</head>
<body>
<button class="btn-danger">删除</button>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.js' %}"></script>
<script>
$(".btn-danger").on("click", function () {
swal({
title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "删除",
cancelButtonText: "取消",
closeOnConfirm: false
},
function () {
var deleteId = $(this).parent().parent().attr("data_id");
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.status === 1) {
swal("删除成功!", "你可以准备跑路了！", "success");
} else {
swal("删除失败", "你可以再尝试一下！", "error")
}
}
})
});
})
</script>
</body>
</html>
八. 对json序列化日期时间 的插件
import json
from datetime import datetime
from datetime import date
#对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
def default(self, field):
if isinstance(field,datetime):
return field.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(field,date):
return field.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self,field)
d1 = datetime.now()
dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)
补充:
1.在 setting.py 文件中设置上 以下代码
可显示操作数据库时执行的mysql 语句
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'handlers': {
'console':{
'level':'DEBUG',
'class':'logging.StreamHandler',
},
},
'loggers': {
'django.db.backends': {
'handlers': ['console'],
'propagate': True,
'level':'DEBUG',
},
}
}
day059-60 ajax初识 登录认证练习 form装饰器, form和ajax上传文件 contentType的更多相关文章
- 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType
回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...
- day059 ajax初识 登录认证练习
ajax初识 ajax有两个特点: 一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的) 示例: 页面输入两个整数,通过AJAX传输到后端计算结果并返回 在HTML文件中: & ...
- form+iframe+file 页面无刷新上传文件并获取返回值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Ajax JQuery HTML 提交上传文件File HTML+ Ajax+ASP.NET+ WebService
起因:公司最近有些项目用到了HTML+WebService的组合,发现访问速度等都快了许多,但是由于通过Ajax只能应付一些简单的文字类的传输,上传文件就捉襟见肘了,如果一直引用第三方的swf之类上传 ...
- 通过Ajax方式上传文件，使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- 一个ajax实现表单上传文件的神器 formdata
通过传统的form表单提交的方式上传文件: $.ajax({ url : "http://localhost:8080/STS/rest/user", type : "P ...
- [转] 通过Ajax方式上传文件，使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- 上传文件，使用FormData进行Ajax请求，jsoncallback跨域
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
随机推荐
- vue安装遇到vue不是内部变量
配置path系统变量 打开我的电脑-->右键属性-->高级系统设置-->环境变量-->Path-->添加获得npm的位置(搜索vue.cmd 可以找到该位置) 全局安装位 ...
- poj3162（树形dp+优先队列）
Walking Race Time Limit: 10000MS Memory Limit: 131072K Total Submissions: 5409 Accepted: 1371 Ca ...
- 主成分分析法PCA原理
PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...
- Shiro-Spring 授权操作
Subject进行Shiro的授权操作,首先委托给Security Manager,在由Security Manager 委托给Authenticator,由Authenticator授权器进行真正的 ...
- 机器学习笔记（三）Logistic回归模型
Logistic回归模型 1. 模型简介: 线性回归往往并不能很好地解决分类问题,所以我们引出Logistic回归算法,算法的输出值或者说预测值一直介于0和1,虽然算法的名字有“回归”二字,但实际上L ...
- java集合（二）
- Java学习笔记(2)
int 和 booleam 不能直接转换,如下语法是不能通过的: boolean b = true; int i = (int) b; int j = 1; boolean a = (boolean) ...
- nginx 配置 同一域名端口下，根据URL 导向不同的项目目录
我们现在拥有2个项目.但是只有一个域名,通过nginx配置来实现以下url导向不同的项目. 后台管理台:{域名}/admin 用户客户端:{域名}/client server { listen 888 ...
- Integer与String的知试点（java中常见面试题）
1.==符号使用 Integer a = 1000,b=1000; Integer c = 100,d=100; System.out.println(a==b); System.out.printl ...
- SQL注入之Sqli-labs系列第四十六关(ORDER BY注入）
0X1查看页面 0x2源码 <?php include("../sql-connections/sql-connect.php"); $id=$_GET['sort']; i ...