Ajax相关

Ajax

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

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

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

异步提交
同步异步:描述的任务的提交方式
同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制

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

实例

1.展示一个前端页面  页面上有三个输入框  前两个框输入数字 点击按钮朝后端发请求
页面不刷新的情况下 完成数字的加法运算
    
方法1:不用JSON
前端:
<input type="text" id="t1"> +
<input type="text" id="t2"> =
<input type="text" id="t3">
<input type="submit" id="b1">

<script>
    $('#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)
            }
        })
    })
</script>
后端:
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交互数据
前端:
<input type="text" id="t1"> +
<input type="text" id="t2"> =
<input type="text" id="t3">
<input type="submit" id="b1">

<script>
    $('#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)
            }
        })
    })

</script>

后端:
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后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法

ajax传文件

    //传文件
    //1生成一个formdata对象
    var MyFormData=new FormData()
    //2往对象中添加键值对
    MyFormData.append('username',$('#t1').val())
    MyFormData.append('pwd','123')
        //  jquer查找上传文件的标签 $('#t3')
        //jquery转换成js对象 $('#t3')[0]
        // js对象.files取到的是一个容器,取第一个  $('#t3')[0].files[0]
    MyFormData.append('file',$('#t3')[0].files[0])
    //然后设置ajax
    $.ajax({
        url:'',
        type:'post',

        //ajax传文件必须设定2个false
        contentType:false, //不需要任何编码,fromdata自带编码,django能识别该对象
        processData:false,//告诉浏览器不需要处理该数据

        data:MyFormData //数据直接丢对象进去

        sueccess:function (data) {
            //回调函数

        }
    })

序列化组件

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")
                        }
                    }
                })
            });
})
posted @ 2019-10-28 20:43  Sheppard_xxx  阅读(120)  评论(0编辑  收藏  举报