Ajax（重点）

• 异步提交
• 局部刷新

"""案例：github注册示例，动态获取用户名，实时的跟后端确认并实时展示到前端（局部刷新）发送请求方式 1 浏览器地址栏直接输入url回车     GET请求2 a标签href属性				   GET请求3 form表单					POST请求/GET请求4 ajax						 POST请求/GET请求"""

1、简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax只学习jQuery封装好之后的版本，所以在前端页面使用ajax的时候需要确保导入jQuery

2、Ajax语法

案例引入："""
页面有三个input框在前两个框中输入数字，点击按钮，朝后端发送到ajax请求后端计算出结果，再返回给前端动态展示到第三个input框（整个过程不允许有刷新，也不能再前端计算）"""

# index.html
+
=

Click


"""
针对后端，如果是用HttpResponse返回的json数据，前端回调函数不会自动反序列化，
如果后端直接用的JsonResponse返回的数据，回调函数会自动反序列化HttpResponse解决方式1 自己再前端用JSON.parse()2.在ajax里配置一个参数dataType:'JSON'  """

当利用ajax进行前后端交互的时候，后端无论返回什么，都只会被回调函数接收，而不再影响这个浏览器页面。

# views.pyfrom django.shortcuts import render, HttpResponsefrom django.http import JsonResponse# Create your views here.
def ab_ajax(request):if request.method == 'POST':# print(request.POST)# d1 = request.POST.get('d1')# d2 = request.POST.get('d2')# # 先转成整型# d3 = int(d1) + int(d2)# print(d3)d={'code':100,'msg':666}# return HttpResponse(d3)# return HttpResponse(json.dumps(d))return HttpResponse(JsonResponse(d))return render(request, 'index.html')

# urls.pyfrom django.contrib import admin
from django.urls import path
from app01 import  views
urlpatterns = [path('admin/', admin.site.urls),#ajax相关path('ab_ajax/',views.ab_ajax)
]

3、前后端传输数据的编码格式(contentType)

# 主要研究 post请求数据的编码格式"""
get请求数据就是直接放在url后面的  url?username=zhao&password=123
"""#可以朝后端发送post的请求方式"""1. form表单2. Ajax请求"""# 前后端传输数据的编码格式"""urlencodedfromdatajson"""

3.0、代码

# index.html
username:
password:
file:

# views.pyfrom django.shortcuts import render# Create your views here.
def index(request):if request.method =='POST':print(request.POST)print(request.FILES)return render(request,'index.html')

# urls.py from django.contrib import admin
from django.urls import path
from app01 import  views
urlpatterns = [path('admin/', admin.site.urls),#前后端编码格式研究path('index/',views.index)
]

3.1、form表单

默认的编码格式是urlencoded
数据格式：username=zhao&password=123
django后端针对符合urlencoded编码格式的数据会自动的帮你解析封装到request.POST中username=zhao&password=123  >>> request.POST如果把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中form表单没有办法发送json格式

• 默认的编码格式

• 数据格式

点击 view source

• django后端针对符合urlencoded编码格式的数据会自动的帮你解析封装到request.POST中

• 如果把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中,而将文件解析到request.FILES中

3.2、ajax

默认编码格式也是urlencoded
数据格式也是:username=tony&age=19
django后端针对符合urlencoded编码格式的数据会自动的帮你解析封装到request.POST中username=zhao&password=123  >>> request.POST

• 编码格式

• 数据格式

• django后端针对符合urlencoded编码格式的数据会自动的帮你解析封装到request.POST中

4、ajax发送json格式数据

前后端传输数据的时候一定要确保编码格式跟数据格式是一致的

"""
前后端传输数据的时候一定要确保编码格式跟数据真正的格式是一致的{"username":"zhao","age":19} 在request.POST里肯定找不到
"""request对象补充request.is_ajax()判断当前请求是否是ajax请求，返回布尔值django对json格式的数据不会做任何的处理

代码:

click me !!

# views.pydef ab_json(request):# print(request.is_ajax())  # 判断当前请求是否是ajax请求，返回布尔值if request.is_ajax():# print(request.POST)# print(request.body)# 针对json格式数据需要自己手动处理json_bytes = request.body  # 二进制数据# json_str = json_bytes.decode('utf-8')  # 将二进制转成字符串# json_dic = json.loads(json_str)"""json.loads括号内如果传入了一个二进制数据，那么内部可以自动解码再反序列化"""json_dic = json.loads(json_bytes)print(json_dic, type(json_dic))return render(request, 'ab_json.html')

# urls.pyfrom django.contrib import admin
from django.urls import path
from app01 import  views
urlpatterns = [path('admin/', admin.site.urls),#ajax发送json格式的数据path('ab_json/',views.ab_json)
]

ajax发送json格式数据需要注意以下几点：

1. contentType参数指定成application/json
2. 确保是真正的json格式数据,JSON.stringify()
3. django后端不会自动处理json格式，需要去request.body中获取数据并处理

• 指定编码格式

• 但是此时要发送的数据并不是json格式,需要转成json格式
• 前端使用JSON.stringify()将想要发送的数据转成json格式的数据

data: JSON.stringify({'username': 'zhao', 'age': 19}),

• 查看json格式数据

{"username":"zhao","age":19}

• 在request.POST中找不到数据
  

• 去request.body中获取数据，转成json格式

json.loads() 括号内如果传入了一个二进制数据，那么内部可以 自动解码再反序列化

5、ajax发送文件数据

"""ajax发送文件需要借助于js内置对象FormData"""

username:
password:

Click Me !!!

# views.pydef ab_file(request):if request.is_ajax():if request.method == 'POST':print(request.POST)print(request.FILES)return render(request, 'ab_file.html')

# urls.pyfrom django.contrib import admin
from django.urls import path
from app01 import viewsurlpatterns = [path('admin/', admin.site.urls),# ajax发送文件path('ab_file/', views.ab_file),
]

总结：

1. ajax发文件需要利用内置对象FormData

       let formDataObj = new FormData();//2. 添加普通的键值对formDataObj.append('username', $('#d1').val());formDataObj.append('password', $('#d2').val());//3. 添加文件对象formDataObj.append('myfile', $('#d3')[0].files[0])

2. 需要指定两个关键性参数

contentType: false, //不需要使用任何编码，django后端能自动识别formdata对象
processData: false, //告诉浏览器不要对数据进行任何处理

3. django后端能自动识别FormData对象，能够将内部的普通键值自动封装到request.POST中，文件数据能自动解析封装到request.FILES中

6、Ajax结合sweetalert实现删除按钮的二次确认

数据展示
{% for user_obj in user_queryset %}{% endfor %}
ID
username
age
gender
describe
{{ user_obj.pk }}
{{ user_obj.age }}
{{ user_obj.username }}
{{ user_obj.gender }}
编辑{ user_obj.pk }}">删除

# views.pydef delete_user(request):"""前后端在使用ajax进行交互的时候，后端通常给ajax回调函数返回一个字典格式的数据字典返回到前端就是一个自定义对象，前端可以通过.的方式拿到想要的数据:param request::return:"""if request.is_ajax():if request.method == 'POST':# code:1000 为响应状态码back_dic = {'code': 1000, 'msg': ''}# 取到前端返回用户想要删除数据的主键值delete_id = request.POST.get('delete_id')models.User.objects.filter(pk=delete_id).delete()back_dic['msg'] = '数据已删除'# 需要告诉前端操作的结果return JsonResponse(back_dic)