四、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)