15 Django Ajax
目录javascript
1、Ajax 介绍
Ajax是一种异步提交，就是在当前页面时，不刷新当前页面的前提下，将数据提交到另外一个页面css
Ajax能够局部刷新页面，在一个页面下，不总体刷新页面，而是能够将当前页面的某一个部分刷新html
此处回忆一下同步异步/阻塞非阻塞前端
同步异步：描述的任务的提交方式java
同步：提交任务以后 原地等待任务的返回结果 期间不干日他的事情python
异步：:提交任务以后 不原地等待 直接执行下一行代码 任务结果的返回经过回调机制jquery
阻塞非阻塞：程序的运行状态------了解程序运行的状态图ajax
Ajax（Asynchronous Javascript And XML）：翻译成中文就是“异步的 Javascript和XML”。即便用Javascript语言与服务器进行异步交互，传输的数据为XML（固然，传输的数据不仅是XML）。数据库
Ajax不是新的编程语言，而是一种使用现有标准的新方法django
Ajax是一门 JS 技术，基于原生 JS 开发，但用原生的 JS 写代码太过于繁琐，咱们用 JavaSquery是实现
提示：JavaSquery是基于javascript方法封装的。。。。
Ajax最大的优势：不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。（这一特色给用户的感觉是在不知不觉中完成请求和响应过程）
AJAX 不须要任何浏览器插件，但须要用户容许JavaScript在浏览器上执行。
2、Ajax 实例
展现一个前端页面 ，页面有三个输入框，一个提交按钮，前面两个输入框输入内容，点击按钮，同过Ajax实现点击按钮向后端提交数据，实现将前两个输入框中的数据计算和返回给第三个输入框中显示
# add_num.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<input id="i1" type="text">+<input id="i2" type="text">=<input id="i3" type="text">
<button>Ajax提交</button>
<script>
{#1.先找到button这个对象，绑定点击事件#}
$('button').click(function () {
{#2. 触发ajax事件#}
$.ajax({
{#1. url：用来控制提交数据的地址，不写默认的是当前的地址#}
url:'',
{#2. type：用来控制向地址提交的请求,能够小写#}
type:'post',
{#3. 用来向后端提交的数据#}
data:{num1:$('#i1').val(),num2:$('#i2').val()},
{#4. 接收从后端返回的数据,也就是异步返回的结果#}
success:function(data){
{#将结果给第三个输入框#}
$('#i3').val(data)
}
})
})
</script>
</body>
</html>
# views.py文件
def add_num(request):
# 判断是否为Ajax请求
if request.is_ajax():
if request.method == 'POST':
num1 = request.POST.get('num1')
num2 = request.POST.get('num2')
data = int(num1)+int(num2)
print(data)
return HttpResponse(data)
return render(request,'add_num.html')
# url.py文件
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
# 经过Ajax向后端传数据将结果计算返回
url(r'^add/$',views.add_num,name='add_page'),
]
3、contentType 交互的数据格式
咱们知道form表单，默认的向后端提交数据的编码格式是urlencoded
urlencoded：
（）=（）&（）=（）这种就是符合urlencoded数据格式
- django后端针对
（）=（）&（）=（）的urlencoded数据格式会自动解析，将结果打包给request.POST 用户只须要从request.POST便可获取对应信息
formdata：
- django后端针对formdata格式类型数据 也会自动解析，可是不会方法request.POST中而是给你放到了request.FILES中
ajax默认的提交数据的编码格式也是urlencoded
总结： django后端针对不一样的编码格式数据 会有不一样的处理机制以及不一样的获取该数据的方法
4、Ajax传json格式数据
注意：在先后端进行数据交互的时候，必定要表名所发的是什么数据，是什么格式的，而且必定要遵照，代表是什么格式数据，就必定要发与之对应的数据格式。
django后端针对前端页面发送过来的 json 数据不会自动解析，会直接原封不动的给你放到request.body中，须要你手动处理，获取数据
# json.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<input id="i1" type="text">
<input id="i1" type="text">
<button>提交</button>
<script>
$('button').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'cecilia','pwd':'123'}),
contentType:'application/json',
success:function (data) {
alert(data)
}
})
})
</script>
</body>
</html>
#views.py文件
import json
def up_json(request):
if request.is_ajax():
if request.method == 'POST':
json_bytes = request.body
json_str = json_bytes.decode('utf8')
json_dic = json.loads(json_str)
print(json_dic,type(json_dic))
return render(request,'json.html')
注意：当前端向后端发送的数据不是json格式的时候，django是默认不给看request.body中的内容的，必定要牢记，当前端向后端发送json格式数据的时候，全部的数据信息都是保存在request.body中的
在上图中能够看到，咱们已经在前端页面中代表了我发的是json格式的数据，因此他提交的数据已经不在是向get和post的请求的那种（）=（）&（）=（）的形式了，因此在post天然是获取不到任何数据的了
如上图，咱们点击view score的时候，咱们能够看到浏览器也默认用application/json的形式来接收前端发送的数据的
5、Ajax向后端传文件
Ajax向后端传文件，须要用到内置对象Formdata，该对象既能够传普通的键值，也能够传文件
# upload_file.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">上传文件
<button>提交</button>
<Script>
$('button').click(function () {
// 1.先生成一个formdata对象
var myFormData = new FormData();
// 2.朝对象中添加普通的键值
myFormData.append('username',$("#t1").val());
myFormData.append('password',$("#t2").val());
// 3.朝对象中添加文件数据
// 1.先经过jquery查找到该标签
// 2.将jquery对象转换成原生的js对象
// 3.利用原生js对象的方法 直接获取文件内容
myFormData.append('myfile',$('#t3')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:myFormData, // 直接丢对象
// ajax传文件 必定要指定两个关键性的参数
contentType:false, // 不用任何编码 由于formdata对象自带编码 django可以识别该对象
processData:false, // 告诉浏览器不要处理个人数据 直接发就行
success:function (data) {
alert(data)
}
})
})
</Script>
</body>
</html>
# views.py文件
def upload_file(request):
# 判断请求是否为Ajax请求
if request.is_ajax():
if request.method == 'POST':
print(request.POST) # 这里只是收到了普通的键值对
print(request.FILES) # 上传的文件的对象在这里
return HttpResponse('收到')
return render(request,'upload_file.html')
注意：
利用formdata对象 可以简单的快速传输数据 (普通键值 + 文件)
有几个参数
data:formdata # 对象 contentType:false # 不用任何编码 由于formdata对象自带编码 django可以识 processData:false # 告诉浏览器不要处理个人数据 直接发就行
6、给前端返回一个字典
将用户表的数据 查询出来 返回给前端
给前端的是一个大字典 字典里面的数据的一个个的字段
# dict.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
{{user_list}}
{#这是最原始的利用模板语法来接收的大字典#}
{#{% for user_obj in user_list %}#}
{# <p>username:{{ user_obj.username }} age: {{ user_obj.age }} gender: {{ user_obj.gender }}</p>#}
{#{% endfor %}#}
</body>
</html>
# views.py文件
from app01 import models
from django.core import serializers
def back_dic(request):
user_obj_list = models.UserInfo.objects.all()
# 1.原始的方式向前端页面传送字典
# user_list = []
# for user_obj in user_obj_list:
# user_list.append({
# 'username':user_obj.username,
# 'age':user_obj.age,
# 'gender':user_obj.get_gender_display()
# })
# 2. 利用serializers这个模块来帮咱们很简单的将对象变为字典
'''
serializers：模块有两个参数
1.format：表明序列成什么格式的数据
2.queryset:要序列化的对象
'''
user_list = serializers.serialize('json',user_obj_list)
return render(request,'dict.html',locals())
7、Ajax + sweetalert
下面咱们要作的一个案例就是这个sweetalert的一个二次确认框
# sweet.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'sweetalert/dist/sweetalert.css' %}">
<script src="{% static 'sweetalert/dist/sweetalert.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>数据展现</h2>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td class="text-center">编辑</td>
</tr>
</thead>
<tbody>
{% for user_obj in user_obj_list %}
<tr>
<td>{{forloop.counter }}</td>
<td>{{user_obj.username }}</td>
<td>{{user_obj.age}}</td>
<td>{{user_obj.get_gender_display}}</td>
<td>
<a href="#" class="btn btn-success">编辑</a>
<a href="#" class="btn btn-warning cancel" del_id="{{ user_obj.pk }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
$('.cancel').click(function () {
var $btn = $(this);
swal({
title: "你肯定要删吗?",
text: "你要是删了,你就准备好跑路吧!",
type: "warning",
showCancelButton: true, //这是肯定俺就
confirmButtonClass: "btn-danger",
confirmButtonText: "对,老子就要删!", //肯定按钮的文本
cancelButtonText: "算了,算了!", //这是取消删除的文本内容
closeOnConfirm: false,
showLoaderOnConfirm: true//实现肯定按钮后的加载后删除
},
function(){
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btn.attr('delete_id')},
success:function (data) {
if (data.code){
swal(data.msg, "你能够回去收拾行李跑路了.", "success");
// 1.直接刷新页面
{#window.location.reload()#}
// 2.经过DOM操做 实时删除
$btn.parent().parent().remove()
}else{
swal("发生了未知错误!", "我也不知道哪里错了.", "info");
}
}
});
});
})
</script>
</body>
</html>
# views.py文件
import time
from django.http import JsonResponse
def sweetalert(request):
# 若是是get请求，就把用户对象返回给前端页面
user_obj_list = models.UserInfo.objects.all()
# 若是是POST请求，就删除须要删除的用户对象
if request.method == 'POST':
# 先定义一个字典，做为返回给前端页面的
back_dic = {"code":True,'msg':''}
delete_id = request.POST.get('delete_id')
models.UserInfo.objects.filter(pk=delete_id).delete()
back_dic['msg'] = '后端传来的:真的被我删了'
time.sleep(3)# 这里是实现一个加载一段时间后删除
return JsonResponse(back_dic)
return render(request,'sweet.html',locals())
补充：
1.上述的样式类部分渲染的样式来自于bootstrap中，全部建议在使用上述样式时，将bootstrap的js和css也导入了，这样的状况下，页面效果就不会有任何问题
2.弹出的上述模态框中，可能字体会被图标掩盖一部分，可经过调整字体的上外边距来解决
8、Ajax 实例
7.1 input框失去焦点事件
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
# register.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>Title</title>
<style>
.aa{
margin-top: 20px;
}
.bb{
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5" style="background-color: #dca7a7;margin-top: 50px">
<div>
<input class="form-control aa" type="text" name='username' value="输入用户名" id="i1">
</div>
<p><span class="bb aa" style="color: red">用户名已存在</span></p>
<div>
<input class="form-control aa" type="text" name='pwd' value="输入密码" id="i2">
</div>
{# <div>#}
{# <input class="form-control aa" type="text" name='repwd' value="确认密码" id="i3">#}
{# </div>#}
<div class="text-center">
<input class="aa" type="radio" name='gender' value="1" id="i4">男
<input class="aa" type="radio" name='gender' value="2" id="i5" checked>女
</div>
<div class="text-center">
<button class="btn aa">注册</button>
</div>
</div>
</div>
</div>
<script>
// 用户名输入框的失去焦点事件
$('#i1').blur(function () {
$.ajax({
url:'',
type:'post',
data:{'username':$(this).val()}, //this表明的是当前的jq对象
success:function (data) {
back_dic=JSON.parse(data);//反序列化从后端传回来的数据
if (back_dic['flag']){
// 若是条件存在，就将标签的bb类属性去掉
$('p>span').removeClass('bb');
}
}
})
})
</script>
</body>
</html>
# views.py文件
def register(request):
if request.method == 'POST':
# 先定义一个字典，用于给前端返回数据
back_dic = {'flag': False}
# 拿到前端的post请求携带的参数
username = request.POST.get('username')
# 从数据库中取这个username名的对象
user_obj = models.UserInfo.objects.filter(username=username).first()
if user_obj:
# 若是这个对象存在
back_dic['flag'] = True
import json
# 将返回序列化号的json格式的数据返回给前端页面
return HttpResponse(json.dumps(back_dic))
return render(request,'register.html')
相关文章
- 1. django 笔记15 ajax系列
- 2. Django-Ajax
- 3. Django中的Ajax
- 4. 12.Django与ajax
- 5. Django + ajax
- 6. Django——Ajax
- 7. Django Ajax
- 8. django ajax
- 9. Django - AJAX
- 10. Django-ajax
- 更多相关文章...
- • ASP - AJAX 与 ASP - ASP 教程
- • AJAX 简介 - PHP教程
- • PHP Ajax 跨域问题最佳解决方案
- • 算法总结-广度优先算法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. django 笔记15 ajax系列
- 2. Django-Ajax
- 3. Django中的Ajax
- 4. 12.Django与ajax
- 5. Django + ajax
- 6. Django——Ajax
- 7. Django Ajax
- 8. django ajax
- 9. Django - AJAX
- 10. Django-ajax