Ajax基本操作
1.Ajax：js自带的功能(学习的是jQuery封装之后的版本)
2.Ajax与form表单的区别
Ajax：异步提交 局部刷新
form表单：同步提交 涉及整个页面
3.基础语法：
$.ajax({
url:'', # 控制数据提交的地址 相当于form表单中的action
type:'post', # 控制请求方式(默认是get请求) 相当于form表单中的method
data:{}, # 组织提交的数据
success:function (args) { # success异步回调函数(函数返回什么就传入什么)
$('#d3').val(args)
}
})
4.实操
html操作：
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<input type="button" value="合并" id="btn">
</body>
<script>
$('#btn').click(function () {
$.ajax({
url:'',
type:'post',
data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
success:function (args) {
$('#d3').val(args)
}
})
})
</script>
views.py操作：
def ajax(request):
if request.method == 'POST':
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
i = i1+i2
return HttpResponse(i)
return render(request, 'a_ajax.html', locals())
数据编码格式
1.数据编码格式
1.1格式一：urlencoded
数据格式：name=lili&age=18
django后端统一将数据放到request.POST中
1.2.格式二：formdata
数据格式：无法查看(二进制格式)
django后端自动将文件数据处理到request.FILES 普通数据request.POST
1.3.格式三：application/json
数据格式：json(form表单无法操作)
django后端不会处理 在request.body中存储(bytes类型) 所有的数据开始都会放在body中
语法注意事项：data:JSON.stringify({'name':'lili'}) 编码
contentType:'application/json'
2.实操
Html操作：
$('#btn').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'lili'}),
contentType:'application/json',
success:function (args) {
}
})
})
views操作：
def ajax(request):
if request.is_ajax():
if request.method == 'POST'
json_bytes = request.body # b'{"name":"lili"}'
import json
json_dict = json.loads(json_bytes)
print(json_dict, type(json_bytes)) # {'name': 'lili'} <class 'bytes'>
return render(request, 'a_ajax.html', locals())
Ajax携带文件数据
$('#btn').click(function(){
let formData = new FormData(); //1.产生内置对象
formData.append('username',$('#d1').val()) //2.添加普通数据
formData.append('file', $('#d2')[0].file[0]) //3.添加文件数据
//4.发送ajax请求
$.ajax({
url:'',
type:'post',
data:formData,
contentType:false, //不使用任何编码
processData:false, //不处理任何数据对象
success:function (args) {
}
}
})
def ajax(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request, 'a_ajax.html')
Ajax回调函数参数问题
1.回调函数：
后端与ajax交互 通常情况下返回json格式数据
前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同
HttpResponse不会自动反序列化
1.需要我们自己操作json.loads(json_bytes)
2.也可以添加固定参数：dataType:'JSON'
JsonResponse会自动反序列化
sweetalter介绍
1.插件操作：可以设置二次确认的动态框样式 可以从bootstrap中查找样式
django自带的序列化组件
def get_book(request):
book_query = models.Book.objects.all()
# 将数据全部构造成json格式 {'pk':1,'title':'书'} 操作麻烦
# book_list = []
# for book_obj in book_query:
# temp_dict = {}
# temp_dict['pk'] = book_obj.pk
# temp_dict['title'] = book_obj.title
# temp_dict['price'] = book_obj.price
# book_list.append(temp_dict)
from django.core import serializers # 使用这种方式
# 调用该模块下的方法，第一个参数是以什么样的方式序列化数据
res = serializers.serialize('json', book_query)
return HttpResponse(res)
# return HttpResponse(book_list) # {'pk': 1, 'title': '云边有个小卖部'}
图书管理系统
1.页面展示代码：
def book(request):
book_list = models.Book.objects.select_related('book_publish').order_by('pk')
return render(request, 'book.html', locals())
<h1 class="text-center">数据添加页面</h1>
<form action="" method="post">
<p class="form-control">书名：
<input type="text" name="title"></p>
<p class="form-control">价格：
<input type="text" name="price"></p>
<p class="form-control">日期：
<input type="date" name="pub_date" ></p>
<select class="form-control" multiple name="author_list" id="" >作者：
{% for author_obj in author_list %}
<option value="{{ author_obj.pk }}">{{ author_obj.name }}
{% endfor %}
</select>
<select class="form-control" name="book_publish_id" id="">出版社:
{% for publish_obj in publish_list %}
<option value="{{ publish_obj.pk }}">{{ publish_obj.name }}
{% endfor %}
</select>
<p><input type="submit" class="btn btn-primary" value="添加"></p>
</form>
2.数据添加代码
def book_add(request):
if request.method == 'POST':
title = request.POST.get('title')
price = request.POST.get('price')
pub_date = request.POST.get('pub_date')
book_publish_id = request.POST.get('book_publish_id')
author_list = request.POST.getlist('author_list')
# 添加数据
book_obj = models.Book.objects.create(
title=title,
price=price,
pub_date=pub_date,
book_publish_id=book_publish_id
)
print(book_obj)
book_obj.book_author.add(*author_list) # *在实参中将列表数据打撒 以位置参数传入
# 跳转到书籍展示页
book_target = reverse('app01_book_views')
return redirect(book_target)
publish_list = models.Publish.objects.all()
author_list = models.Author.objects.all()
return render(request, 'book_add.html', locals())
3.编辑数据代码
def book_update(request, update_id):
# 获取用户编辑对象
update_obj = models.Book.objects.filter(pk=update_id).first()
if request.method == 'POST':
title = request.POST.get('title')
price = request.POST.get('price')
pub_date = request.POST.get('pub_date')
book_publish_id = request.POST.get('book_publish_id')
author_list = request.POST.getlist('author_list')
# 修改数据
models.Book.objects.filter(pk=update_id).update(
title=title,
price=price,
pub_date=pub_date,
book_publish_id=book_publish_id
)
print(update_obj)
update_obj.book_author.set(author_list)
# 跳转到书籍展示页
book_target = reverse('app01_book_views')
return redirect(book_target)
publish_list = models.Publish.objects.all()
author_list = models.Author.objects.all()
return render(request, 'book_update.html', locals())
4.删除数据
def book_del(request, del_id):
models.Book.objects.filter(pk=del_id).delete()
return redirect('app01_book_views')
posted on
