html代码:
{% load static %}
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = "UTF-8">
<title>小骚浩</title>
</head>
<body>
<h1>
登录页面
</h1>
{% csrf_token %} #安全认证
<hr>
用户名:<input type = 'text' id = 'username'>
密码: <input type = "password" id = "password">
<button id = "sub">
提交
</button>
<span id = 'error' style = "color : red; font_size : 12px;"> </span>
</body>js代码:
<script src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('#sub').click(function(){
var username = $('#username').val();
var password = $('password').val();
var csrf = $('[name = "csrfmiddlewaretoken"]').val();
$.ajax({
url:'{% url 'login' %}', #请求路径，如果将js代码放到另一个文件中，url模块渲染不会被渲染，即系统会报错
type:'post', #请求方法
data:{'username':username,'password':password,'csrfmiddlewaretoken':csrf},#请求数据，不需要携带数据的请求，不需要写data参数
success:function(res){#res参数拿到的是响应数据
if (res !== 'ok'){
$('error').text("用户名或密码错误")
}else{
location.href='/home/';#跳转到 home页面
}
}
})
})
</script>
</html>views.py代码：
from django.http import JsonResponse
from django.views import View
from django.shortcuts import render,redirect,HttpResponse
class Login(View):
def get(self,request):
return render(request,'login.html')
def post(self,request):
username = request.POST.get('username')
password = request.POST.get('password')
if username == "小骚浩" and password == "5201314":
return HttpResponse('ok')
else:
return HttpResponse("不 ok")方式一：
html代码：
{% csrf_token %}
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>js代码：
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
# 获取到{% csrf_token %}这个模板渲染语法渲染之后的input标签对应的值
var xxx = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url:'{% url "login" %}', // 127.0.0.1:8000/login/
type:'post',
# 给post请求提交的数据中添加上csrf_token认证所需要的键值对
data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':xxx},
success:function (res) {
console.log('>>>>',res);
if (res !== 'ok'){
$('#error').text('用户名或者密码有误!')
}else {
location.href='/home/';
}
}
})
})
方式二：
html代码：
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>js代码：
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
$.ajax({
url:'{% url "login" %}', // 127.0.0.1:8000/login/
type:'post',
# data数据部分的csrf_token认证的键值对的值直接写{{ csrf_token }} ,经过模板渲染之后,它直接就是那个input标签的value值
data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},
success:function (res) {
console.log('>>>>',res);
if (res !== 'ok'){
$('#error').text('用户名或者密码有误!')
}else {
location.href='/home/';
}
}
})
})方式三(ajax上传文件示例)：
html代码：
{% csrf_token %}
用户名:<input type="text" name="username">
头像: <input type="file" name="file_obj">
<input type="submit" id="btn">js代码：
$('#btn').click(function () {
var formdata = new FormData(); #实例化FormData对象
var uname = $('[name="username"]').val();
// var file_obj = $('[name="file_obj"]').val(); //"C:\fakepath\0.jpg" 拿到的文件的本地路径
var f_obj = $('[name="file_obj"]')[0].files[0] ; // 这是文件对象
formdata.append('username',uname);
formdata.append('file_obj',f_obj);
formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());
$.ajax({
url:'/upload/',
type:'post',
// data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},
// 上传文件时的固定搭配 formdata
processData:false,
contentType:false,
data:formdata,
success:function (res) {
console.log(res)
}
})
})html代码：form表单标签的 enctype="multipart/form-data"这个属性要写才能上传文件,content-type请求头中的携带数据的消息格式>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
用户名:<input type="text" name="username">
头像: <input type="file" name="file_obj">
<input type="submit">
</form>views.py代码：
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get('file_obj')
# f = open('xx','rb')
# for i in f:
# print(i)
print(file_obj.name)
with open(file_obj.name,'wb') as f:
# for i in file_obj:
# f.write(i)
for i in file_obj.chunks(): #65536字节
f.write(i)
return HttpResponse('ok')? views代码：
from django.http import JsonResponse
def data(request):
if request.method == 'GET':
d1 = {'name':'chao','age':18}
# d1_str = json.dumps(d1)
# return HttpResponse(d1_str,content_type='application/json')
return JsonResponse(d1) #干了上面两步,序列化以及加content_type响应头这样,ajax在处理数据时会自动将json数据反序列化,那么如果jsonresponse的数据不是字典,需要加上safe参数
return JsonResponse(d1,safe=False)
success:function(res){
这个res就是反序列化之后的数据了,直接可以用
} views代码：
序列化时间
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)html代码：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍展示</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'tankuang/dist/sweetalert.css' %}">
<style>
a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<h2>查看书籍中。。。</h2>
<div class="col-xs-8 col-xs-offset-2 " style="padding-top: 15px;">
<div>
<div class="panel-body">
<div class="row pull-left col-xs-1" style="padding-left: 0">
<a href="{% url 'addBook' %}"><button type="button" class="btn btn-primary">添加书籍
</button></a>
</div>
<div class="row pull-left col-xs-1 col-xs-offset-1" style="padding-left: 0">
<a href="{% url 'author' %}"><button type="button" class="btn btn-primary">展示作者
</button></a>
</div>
<div class="row pull-left col-xs-1 col-xs-offset-1" style="padding-left: 0">
<a href="{% url 'addAuthor' %}"><button type="button" class="btn btn-primary">添加作者
</button></a>
</div>
<div class="row pull-right col-xs-6" style="padding-right: 0">
<form action="" method="post">
{% csrf_token %}
<div class="row col-xs-6 pull-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入查询条件" name="info">
<span class="input-group-btn">
<a href="{% url 'book' %}" role="button" >
<button class="btn btn-success" type="submit">Go
</button></a>
</span>
</div>
</div>
<div class="btn-group pull-right" >
<select name="choose" id="choose" style="height: 34px;text-align: center;line-height: 34px;">
<option value="0">请选择以下内容</option>
<option value="1">作者</option>
<option value="2">书籍名称</option>
<option value="3">书籍价格</option>
<option value="4">出版社日期</option>
<option value="5">出版社</option>
<option value="6">出版城市</option>
</select>
</div>
</form>
</div>
</div>
<div>
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>编号</th>
<th>书籍名称</th>
<th>书籍作者</th>
<th>价格</th>
<th>出版日期</th>
<th>出版社</th>
<th>出版城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for i in ret %}
<tr class="active ">
<td class="first_child">{{ forloop.counter}}</td>
<td>{{ i.title}}</td>
<td>{% for j in i.authors.all %}
{{ j.name }}
{% if forloop.last %}
{% else %}
,
{% endif %}
{% endfor %}</td>
<td>{{ i.price}}</td>
<td>{{ i.publishDate|date:'Y-m-d' }}</td>
<td>{{ i.publishs.name }}</td>
<td>{{ i.publishs.city }}</td>
<td>
<a href="{% url 'Editbook' i.id %}" class="btn btn-warning btn-sm">编辑</a>
<button bookid = "{{ i.id }}" class="delete_btn btn btn-danger btn-sm">删除</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>js代码:
<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'tankuang/dist/sweetalert.min.js' %}"></script>
<script>
$(".delete_btn").on("click",function(){
var ths = $(this);
swal({
title:"想好了吗?",
text:"请陛下三思!",
type:"warning",
showCancelButton:true,
confirmButtonClass:"btn_danger",
confirmButtonText:"再见",
cancelButtonText:"取消",
closeOnConfirm:false
},
function(){
var deleteId = ths.attr('xxoo');
$.ajax({
url:'/delbook/',
type:'post',
data:{'id':deleteid},
success:function(data){
if(data.status === '1'){
swal("删除成功",'success');
ths.parent().parent().remove();
var tr_first_id = $('tr_first_child');
for (var i = 0;i < tr_first_id.length; i++){
$('tr .first_child').eq(i).text(i+1);
}
}else{
swal('删除失败','error');
}
}
})
})
})
</script>
</html>views.py代码：
from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
def delbook(request):
ret_data = {'status':None,}
print(ret_data)
if request.method == "POST":
try:
book_id = request.POST.get('id')
models.Book.objects.filter(id=book_id).delete()
ret_data['status'] = '1'
except Exception:
ret_data['status'] = '2'
print(ret_data)
return JsonResponse(ret_data)urls.py代码：
from app01 import views
urlpatterns = [
url(r'^delbook/', views.delbook,name='delbook'),
]原文：https://www.cnblogs.com/ghh520/p/11946006.html