二 .python基于djago项目登录 ajax基本使用_python

概述一. djago项目登录 ajax基本使用( ajax无页面刷新) 登录成功跳转>>> models from django.db import models class UserInfo(models.Model): user=models.CharField(max_length=32) pwd=models.CharField(m 一. djago项目登录 AJAX基本使用( AJAX无页面刷新)

登录成功跳转>>>

models from django.db import models

class UserInfo(models.Model):
    user=models.CharFIEld(max_length=32)
    pwd=models.CharFIEld(max_length=32)

urls from django.contrib import adminfrom django.urls import pathfrom app01 import vIEwsurlpatterns = [    path(‘admin/‘,admin.site.urls),path(‘index/‘,vIEws.index),path(‘handle_AJAX/‘,vIEws.handle_AJAX),path(‘cal/‘,vIEws.cal),path(‘login/‘,vIEws.login),]

viwes from django.shortcuts import render,httpResponse# Create your vIEws here.from app01.models import UserInfoimport Jsondef index(request):    return render(request,"index.HTML")def handle_AJAX(request):    return httpResponse("AJAX请求成功了哈哈哈")def cal(request):    import time    # time.sleep(10)    # print(request.GET)    # num1=request.GET.get("num1")    # num2=request.GET.get("num2")    num1=request.POST.get("num1")    num2=request.POST.get("num2")    ret=int(num1)+int(num2)    return httpResponse(str(ret))def login(reqeust):    if reqeust.method=="POST":        res={"user":None,"error":""}        print(reqeust.POST)        user=reqeust.POST.get("user")        pwd=reqeust.POST.get("pwd")        user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()        if user_obj:            res["user"]=user        else:            res["error"]="用户名或者密码错误！"        return httpResponse(Json.dumps(res))    else:        return render(reqeust,"login.HTML")


login.HTML 页面 <!DOCTYPE HTML><HTML lang="zh-CN"><head>    <Meta charset="UTF-8">    <Title>Title</Title>    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">    <script src="/static/Js/jquery-3.3.Js"></script></head><body><form>       用户名 <input type="text" ID="user">       密码 <input type="password" ID="pwd">       <input type="button" value="提交" ID="login_btn"><span class="error"></span>       {% csrf_token %}</form><script>    $("#login_btn").click(function () {        // 发送AJAX请求登录认证        $.AJAX({            url:"/login/",type:"post",data:{                user:$("#user").val(),pwd:$("#pwd").val(),csrfmIDdlewaretoken:$("[name=‘csrfmIDdlewaretoken‘]").val()            },success:function (response) {                console.log(response);   // Json字符串                var res=JsON.parse(response);                console.log(res);                if (res.user){                    // 登陆成功                    location.href="/index/"                }else{                    // 登录失败                    $(".error").HTML(res.error).CSS("color","red");                    setTimeout(function () {                        $(".error").HTML("")                    },1000)                }            }        })            })</script></body></HTML>

index.HTML 页面 <!DOCTYPE HTML><HTML lang="zh-CN"><head>    <Meta charset="UTF-8">    <Title>Title</Title>    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">    <script src="/static/Js/jquery-3.3.Js"></script></head><body><h4>INDEX页面</h4><button class="btn">提交AJAX</button><p class="show"></p><hr>{% csrf_token %}<input type="text" ID="num1"> + <input ID="num2" type="text"> = <input ID="ret" type="text"><button class="cal">计算</button><script>       //   j简单的AJAX请求       $(".btn").click(function () {           $.AJAX({               url:"/handle_AJAX/",type:"get",success:function (response) {                   console.log(response);                   $(".show").HTML(response)               }           })       });       //  传参AJAX请求              $(".cal").click(function () {           var num1=$("#num1").val();           var num2=$("#num2").val();           $.AJAX({               url:"/cal/",data:{                   num1:num1,num2:num2,csrfmIDdlewaretoken:$("[name=‘csrfmIDdlewaretoken‘]").val()               },success:function (response) {                   console.log(response);                   $("#ret").val(response)               }           })       })       </script></body></HTML>

AJAX发送数据格式知识点 <!DOCTYPE HTML><HTML lang="zh-CN"><head>    <Meta charset="UTF-8">    <Title>Title</Title>    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">    <script>        var i=10;        var s=‘hello‘;        var arr=["123",456,true];        var obj={name:‘alex‘,age:23};        console.log(JsON.stringify(s));        console.log(JsON.stringify(arr));        console.log(JsON.stringify(obj));      // console.log(JsON.parse(s));      // console.log(JsON.parse(arr));      console.log(JsON.parse(‘{"name":"alex","age":18}‘))        /*        *     序列化方法：  JsON.stringify()  等同于Python Json.dumps()        *    反序列化方法： JsON.parse()      等同于Python Json.loads()        *        *        * */            </script></head><body></body></HTML>