个人理解：Ajax的局部刷新流程

用户信息输入表单 —> 触发ajax —> ajax获取用户输入的信息去请求接口（django） —>
触发接口逻辑后接口向ajax返回数据 —> ajax做逻辑判断并触发相应的动作（例如返回登陆错误提示、跳转新页面）

Ajax更像是一个代理。

配置静态文件

  1. STATIC_URL = '/static/'
  2. STATICFILES_DIRS = [
  3.     os.path.join(BASE_DIR,'statics'),
  4. ]

将静态js文件放到静态目录
jquery.js

配置url分发

  1. from django.contrib import admin
  2. from django.urls import path
  3. from test01 import views
  5. urlpatterns = [
  6.     path('login/', views.Login.as_view()),  # 用户登陆的信息校验
  7.     path('base/', views.base),      # 登陆后返回的页面
  8. ]

html开发（重要）

  1. {% load static %}     // 加载静态配置文件 
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  9.   <title>new test</title>
  10.   <!-- Bootstrap -->
  11. </head>
  12. <body>
  13. <h1>你好，欢迎来到登录页面</h1>
  15. <form action="/login/" method="post">
  16.   {% csrf_token %}
  18.   用户名: <input type="text" id="username" name="username">
  19.   密码: <input type="password" id="password" name="password">
  20.   <input type="button" id="btn" value="确认">   // form表单中的提交按钮不能直接触发，直接触发的话就不会走ajax流程了，不能用 <button></button>,<input type="submit">
  21.   <span style="color:red;font-size: 12px;" id="error"></span>
  22. </form>
  26. <script src="{% static 'jquery.js' %}"></script>
  27. <script>
  30. $('#btn').click(function () {
  31.             // 点完提交 将数据源传输给ajax，ajax会把数据传输给django
  32.       $.ajax({
  33.           url:"/login/",  //"/login/"
  34.           type:'post',
  35.           data:{
  36.               uname:$('#username').val(),
  37.               pwd:$('#password').val(),
  38.               csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),  // 这个是django的tocken认证
  39.               {#csrfmiddlewaretoken:"{{ csrf_token }}", //"sdfasdgadg;oasd;foaj"#}
  40.           },
  41.           success:function (res) {  // django处理成功后 会返回一个字符串 这个字符串必须能解析成json
  43.               {#var resStr = sessionStorage.getItem(res)#}
  44.               var resStr = JSON.parse(res); // 做json解析 
  45.               console.log(res,typeof res);  // 浏览器的终端日志打印
  46.               //  底下是一些逻辑的判断
  47.               if (resStr['code'] === "9999"){  // 失败
  48.                   var spanEle = document.createElement('span');
  49.                   $('#error').text(resStr['msg']);
  50.               }
  51.               else if(resStr['code'] === '0000'){  // 成功
  52.                   location.href=resStr['url']
  53.               }
  55.           }
  56.       })
  57.   })
  59. </script>
  61. </body>
  62. </html>

视图逻辑

  1. from django.shortcuts import render,HttpResponse,redirect
  2. from  django.views import  View
  3. # Create your views here.
  7. class Login(View):
  8.     # 这里用到了 CBV
  9.     def get(self,request):
  10.         return  render(request,'new.html')
  13.     def post(self,request):
  14.         # 以下两个是基于from表单提取数据
  15.         # name = request.POST.get('username')
  16.         # pass1 =  request.POST.get('password')
  18.         # 以下是基于ajax获取
  19.         name = request.POST.get('uname')
  20.         pwd = request.POST.get('pwd')
  21.         if name == 'guo' and pwd == 'guo':
  22.             res = '{"code":"0000","url":"/base/"}'   # 返回的数据需要时字符串，返回字典ajax解析json会失败
  23.             return HttpResponse(res)
  25.         else:
  26.             res = '{"code":"9999","msg":"用户名或密码不正确！！！"}'
  27.             return HttpResponse(res)
  31. def base(request):
  32.     return  render(request,'login.html')

效果图（主要看失败的效果）

image.png