四、Ajax


返回

4.1 特点

  • 异步请求:向服务器发送请求后,无需等待服务器响应结束,就可以发送第二次请求
  • 局部刷新

4.2 views.py

# 8、post
if request.method == "POST":
    usr = request.POST.get('usr')
    pwd = request.POST.get('pwd')
    # 9、自定义认证状态
    res = {'usr': None, 'msg': None}
    # 10、auth认证校验
    obj = auth.authenticate(username=usr, password=pwd)
    if obj:
        auth.login(request, obj)
        res['usr'] = obj.username
    else:
        res['msg'] = '账号或密码错误'
    # 11、返回认证状态 --> login.js -> ajax
    res = json.dumps(res)  # json序列化-->字符串
    return HttpResponse(res)
# 1、get
return render(request, "auth/login.html", locals())

4.3 login.html

<!-- 2、登录 -->
<input type="button" id="submit">登录
<!-- 14、错误信息 -->
<span id="login_auth"></span>

4.2 login.js

// 入口函数
$(function () {
  	// 3、id选择器获取点击事件
    $('#submit').click(function () {
      	// 4、ajax请求
        $.ajax({
          	// 5、请求地址
            url: '/app_auth/login/', 
          	// 6、请求方式
            type: 'post',  
            // 7、请求数据
            data: {  
                'usr': $('#id_usr').val(),
                'pwd': $('#id_pwd').val(),
            },
          	// 12、回调函数
            success: function (data) {
                data = JSON.parse(data)  // json反序列化-->对象
                // 13、认证成功,进入home
                if (data.usr) {
                    location.href = '/app_home/home/';
                } 
                // 13、认证失败,提示错误信息
                else {
                    $('#login_auth').html(data.msg)
                }
            }
        })
    })
})
  • 基于form表单传文件

    <!-- 加enctype属性,默认为application/x-www-form-urlencoded -->
    <from action="" method="post" enctype="multipart/form-data">
    		<input type="text" name="user">
        <input type="file" name="file_name">
      	<input type="submit">上传
    </from>
    
    if request.method == "POST":
        print(request.POST)
        print(request.FILES)
        # 获取文件对象
        file_obj = request.FILES.get('file_name')
        # 写入新文件
        with open(file_obj.name, 'wb') as f:
          	for line in file_obj:
              	f.write(line)
    
  • 基于ajax传文件

    <from>
      	<input type="text" id="user">
    		<input type="file" id="the_file">
      	<input type="button">上传
    </from>
    
    // 获取文件对象
    var formdata = new FormData();
    formdata.append('user', $('#user').val)
    formdata.append('file_name', $('#the_file')[0].files[0])
    // ajax请求
    $.ajax({
        url: '/app_auth/login/', 
        type: 'post', 
      	// 两个参数设置
      	contentType: false,
      	processData: false,
        data: formdata,
        success: function (data) {
            ...
        }
    })
    
    if request.method == "POST":
        print(request.POST)  # 只在contentType=urlencoded时,才有值
        print(request.bofy)  # 请求体,始终有值
        # 获取文件对象
        file_obj = request.FILES.get('file_name')
        # 写入新文件
        with open(file_obj.name, 'wb') as f:
          	for line in file_obj:
              	f.write(line)
    
返回