AJAX

一什么是AJAX

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

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

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

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

场景：

AJAX的优缺点

优点：

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

二基于jquery实现AJAX

最基本的jQuery发送AJAX请求示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ajax test</title> 
</head>
<body>
<button id="ajaxTest">AJAX 测试</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#ajaxTest').click(function() {
        $.ajax({
            url: '/ajax_test/',
            type: 'POST',
            data: {username: 'sml',password:125},
            success: function(data) {
                alert(data)
            }
        })
    })
    
</script>
</body>
</html>

view.py

def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")

$.ajax参数

data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

AJAX --->服务器 ---> AJAX执行流程图

三基于AJAX进行登录验证

用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息

视图函数：

def auth(request):
    back_dic = {'user':None,'meassage':None}
    name = request.POST.get('user')
    password = request.POST.get('password')
    print(name,password)
    user = models.user.objects.filter(name=name,password=password).first()
    if user:
        back_dic['user'] = user.name
        back_dic['message'] = '成功'
    else:
        back_dic['message'] = '用户名密码错误'
    import json
    return HttpResponse(json.dumps(back_dic))

js 代码：

<script>
    $('#submit').click(function(){
        $.ajax({
            url: '/auth/',
            type: 'POST',
            data: {
                'user': $("#id_name").val(),
                'passsword': $("#id_password").val(),
            },

            success: function(data) {
                var dta = JSON.parse(data)
                if (data.user) {
                    location.href = 'https://www.baidu.com'
                } else {
                    $(".error").html(data.message).css({'color':'red','margin-left':'20px'})
                }
            }
        })
    })
</script>

四文件上传

请求头ContentType

1 application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据

2 multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data

基于form表单上传文件

<form action="/file_put/" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="name">
    头像：<input type="file" name="avatar" id="avatar1">
<input type="submit" value="提交">
</form>

必须指定 enctype="multipart/form-data"

视图函数

def file_put(request):
    if request.method=='GET':
        return render(request,'file_put.html')
    else:
        # print(request.POST)
        # print(request.POST)
        print(request.body)  # 原始的请求体数据 
        print(request.GET)  # GET请求数据 
        print(request.POST)  # POST请求数据 
        print(request.FILES)  # 上传的文件数据
        # print(request.body.decode('utf-8'))
        print(request.body.decode('utf-8'))

        print(request.FILES)
        file_obj=request.FILES.get('avatar')
        print(type(file_obj))
        with open(file_obj.name,'wb') as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse('ok')

基于AJAX上传文件

$("#ajax_button").click(function () {
        var formdata=new FormData()
        formdata.append('name',$("#id_name2").val())
        formdata.append('avatar',$("#avatar2")[0].files[0])
        $.ajax({
            url:'',
            type:'post',
            processData:false, //告诉jQuery不要去处理发送的数据
            contentType:false,// 告诉jQuery不要去设置Content-Type请求头
            data:formdata,
            success:function (data) {
                console.log(data)

            }

        })
    })

五 AJAX 提交json数据

$("#ajax_test").click(function () {
        var dic={'name':'lqz','age':18}
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json',  //一定要指定格式 contentType: 'application/json;charset=utf-8',
            data:JSON.stringify(dic),    //转换成json字符串格式
            success:function (data) {
                console.log(data)
            }

        })

    })

六 Django内置的 serializers (把对象序列化成json字符串）

from django.core import serializers
def test(request):
    book_list = Book.objects.all()    
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)

posted @ 2018-10-09 11:04 Shinonon 阅读(179) 评论(0) 收藏举报

嗯姆嗯姆嗯姆

AJAX

一什么是AJAX

AJAX的优缺点

优点：

二基于jquery实现AJAX

三基于AJAX进行登录验证

四文件上传

五 AJAX 提交json数据

六 Django内置的 serializers (把对象序列化成json字符串）

公告

嗯姆嗯姆嗯姆

AJAX

一 什么是AJAX

AJAX的优缺点

优点：

二 基于jquery实现AJAX

三 基于AJAX进行登录验证

四 文件上传

五 AJAX 提交json数据

六 Django内置的 serializers (把对象序列化成json字符串）

公告

一什么是AJAX

二基于jquery实现AJAX

三基于AJAX进行登录验证

四文件上传