Ajax

Ajax的特性可以实现异步提交与局部刷新。

Ajax是一门js的技术 基于原生js开发的，但是用原生的js写代码过于繁琐， 我们在学的时候 只学如何用jQuery实现ajax。

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

异步提交

同步异步：描述的任务的提交方式

同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿

异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制

局部刷新

一个页面 不是整体刷新 而是页面的某个地方局部刷新

实例

1.展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求

页面不刷新的情况下 完成数字的加法运算

方法1：不用JSON

前端：

+

=

$('#b1').on('click', function () {

$.ajax({

// 1.朝后端发送数据的地址，空即为当前地址

url: '', //提交的目标地址

//2. 发送的请求方式

type: 'post',

//3 发送的数据

data: {'t1': $('#t1').val(), 't2': $('#t2').val()},

success: function (data) {

//由于ajax是异步提交，所以需要一个回调函数，在提交的结果返回到时执行

//这里的data是views那边返回的结果

$('#t3').val(data)

}

})

})

后端：

class Ajax(View):

def post(self, request):

if request.is_ajax():

t1 = request.POST.get('t1')

t2 = request.POST.get('t2')

res = int(t1) + int(t2)

return HttpResponse(res)

def get(self, request):

return render(request, 'ajax.html')

方法二：JSON交互数据

前端：

+

=

$('#b1').on('click', function () {

$.ajax({

// 1.朝后端发送数据的地址，空即为当前地址

url: '', //提交的目标地址

//2. 发送的请求方式

type: 'post',

//发送数据的格式

contentType:'application/json',

//3 发送的数据

data: JSON.stringify({'t1': $('#t1').val(), 't2': $('#t2').val()}),

success: function (data) { //这里的data是views那边返回的结果

$('#t3').val(data)

}

})

})

后端：

class Ajax(View):

def post(self, request):

if request.is_ajax():

json_bytes=request.body

json_str=json_bytes.decode('utf8')

json_dic=json.loads(json_str)

print(json_dic,type(json_dic))

res=int(json_dic.get('t1'))+int(json_dic.get('t2'))

return JsonResponse(res,safe=False)

注：

form表单的默认的提交数据的编码格式是urlencoded(username=admin&password=123)

django后端针对username=admin&password=123的urlencoded数据格式会自动解析，然后将结果打包给request.POST 用户只需要从request.POST即可获取对应信息。

传输文件时django后端针对formdata格式类型数据 也会自动解析，但是不会方法request.POST中而是给你放到了request.FILES中。

总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法

序列化组件

1.将用户表的数据 查询出来 返回给前端

给前端的是一个大字典 字典里面的数据的一个个的字段

from django.core import serializers

def ser(request):

user_queryset = models.Userinfo.objects.all()

# [{},{},{},{}]

# user_list = []

# for user_obj in user_queryset:

# user_list.append({

# 'username':user_obj.username,

# 'password':user_obj.password,

# 'gender':user_obj.get_gender_display(),

# })

res = serializers.serialize('json',user_queryset)

print(res)

return render(request,'ser.html',locals())

sweetalert+ajax

ajax + sweetalert

$("#b55").click(function () {

swal({

title: "你确定要删除吗？",

text: "删除可就找不回来了哦！",

type: "warning",

showCancelButton: true, // 是否显示取消按钮

confirmButtonClass: "btn-danger", // 确认按钮的样式类

confirmButtonText: "删除", // 确认按钮文本

cancelButtonText: "取消", // 取消按钮文本

closeOnConfirm: false, // 点击确认按钮不关闭弹框

showLoaderOnConfirm: true // 显示正在删除的动画效果

},

function () {

var deleteId = 2;

$.ajax({

url: "/delete_book/",

type: "post",

data: {"id": deleteId},

success: function (data) {

if (data.code === 0) {

swal("删除成功!", "你可以准备跑路了！", "success");

} else {

swal("删除失败", "你可以再尝试一下！", "error")

}

}

})

});

})