Ajax请求
1.1Ajax请求与get、post请求的区别
form请求：浏览器向网站发送请求时，url和表单的形式提交
GET请求：url方式获取数据POST请求：以表单的形式提交数据 特点: 一次完整的GET或POST请求，会进行一次页面刷新 基于Ajax向后台发送请求（与post 一样偷偷发送请求）
依赖于jQuery编写Ajax代码 $.ajax({
url: '/task/ajax', //请求地址
type: 'post',//请求类型(get)
data: { //传送的数据
n1: 123,
n2: 456,
},
//后端返回的是带有数据结构的数据
//但是前端接收到的就是一个字符串，若想要获取到json格式的数据，需要加dataType
dataType: 'JSON',
success: function (res) { //执行成功的操作sussess（function定义success操作）
//res 为json数据，带有数据结构
console.log(res); //接收视图函数task_ajax穿的数据res，并打印
})
success 操作。 表示执行成功获取后端的响应res之后的一系列操作
{
}
def task_ajax(request):
print("get:", request.GET)
print("post:", request.POST)
dict = {'status': True, 'data': [1, 2, 3, 4]}
# 将数据json.dumps()则返回带有数据结构的数据
return HttpResponse(json.dumps(dict)) # 返回{"status": true, "data": [1, 2, 3, 4]}
dict = {'status': True, 'data': [1, 2, 3, 4]}
return HttpResponse(dict) 返回statusdata
return HttpResponse(json.dumps(dict)) 返回{“status”: true, “data”: [1, 2, 3, 4]}
GET和POST每次请求需要刷新，而Ajax不需要刷新页面，因此使用Ajax请求，可以将增删改查集成在一个网页中
1.2 Ajax的绑定方式
1.2.1 点击函数绑定
测试1
function clickMe() {
//定义ajax
$.ajax({
url: '/task/ajax', //请求地址
type: 'post',//请求类型
data: { //传送的数据
n1: 123,
n2: 456,
},
success: function (res) { //执行成功的操作sussess（function定义success操作）
console.log(res); //接收视图函数task_ajax穿的数据res，并打印
}
})
}
onclick="clickMe()"通过此属性，绑定此按钮
通过点击此按钮，向'/task/ajax'传送数据，并获得响应res
1.2.2 借助jQuery绑定
页面框架加载完成自动执行的操作
$(function () {
bindBtn1Event();//页面框架加载完成自动执行bindBtnEvent()函数
})
jQuery相关知识点的应用
$('#id') 找到对应id的标签
$('.class') 找到对应class的标签
测试1
$('#btn1').click(function () {xxxx }) 找到id=btn1的标签，点击后执行func函数一系列操作
1.2.3利用Ajax动态传输数据
传输较少数据
测试2
data: { //传送的数据
//利用$('#id').val()动态获取输入的数据
name: $('#name').val(),
age: $('#age').val(),
}
使用id得到对应的input输入框输入的数据
利用form传输多条数据
测试3
data: $('#form3').serialize(), //自动获取表单中所有输入框的数据（返回字典）
1.2 Ajax实现任务列表功能
1.2.1 构造表
class Task(models.Model):
"""任务"""
title = models.CharField(max_length=64,verbose_name="标题")
detail = models.TextField(verbose_name="详细信息")
level_choice = (
(1,'紧急'),
(2,'重要'),
(3,'一般'),
)
level = models.SmallIntegerField(verbose_name='级别',choices=level_choice, default=1)
user = models.ForeignKey(verbose_name="负责人",to='Admin',on_delete=models.CASCADE)
1.2.2 任务展示列表
task_list.html
{% extends 'layout.html' %}
{% block content %}
Ajax案例
...
...
...
| ID | 标题 | 详细信息 | 等级 | 负责人 |
|---|---|---|---|---|
| {{ obj.id }} | {{ obj.title }} | {{ obj.detail }} | {{ obj.get_level_display }} | {{ obj.user }} |
发表评论