代码编织梦想

在这里插入图片描述

系列文章目录

以下几篇侧重点为JavaScript内容0.0

  1. JavaScript入门宝典:核心知识全攻略(上)
  2. JavaScript入门宝典:核心知识全攻略(下)
  3. Django框架中Ajax GET与POST请求的实战应用
  4. VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser”!


前言

    在本博客中,我们将通过登录注册两个实战案例,深入探讨如何在Django项目中使用Ajax进行网络请求以实现数据交互。同时,我们还将详细解析如何利用Cookie和Session来管理用户状态,确保用户信息的安全性和一致性。


一、跨域

跨域问题参考下面这篇文章:
跨域问题与Django解决方案:深入解析跨域原理、请求处理与CSRF防护

二、登录

1.前端html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script src="./js/jquery-2.2.0.min.js"></script>
    <script>
        function fnLogin() {
            var username_label = document.getElementById('username');
            var password_label = document.getElementById('password');
            var user = {
                username: null,
                password: null,
            }
            user.username = username_label.value;
            user.password = password_label.value;

            $.ajax({
                url: "http://127.0.0.1:8000/app/login/",
                type: "POST",
                dataType: "json",
                data: user,
                xhrFields: { withCredentials: true }, //设置支持携带cookie
                success: function (response) {
                    if (response.code == '200') {
                        alert(response.message)
                        window.location.href = 'exd8_news.html';
                    } else {
                        alert(response.message)
                    }
                },
                error: function () {
                    alert("请求失败!")
                }, async: true
            })
        }

    </script>
</head>

<body>
    <input type="text" id="username" placeholder="请输入用户名:"><br>
    <input type="text" id="password" placeholder="请输入密码:"><br>
    <input type="button" value="Login" onclick="fnLogin();">


</body>

</html>

2.后端逻辑

# app/views.py
class LoginView(View):
    def post(self,request):
        username = request.POST.get('username')
        password = request.POST.get('password')

        try:
            user = UserModel.objects.get(username=username)
            if user.password == password:
                request.session['userid'] = user.id #
                print("-------------------")
                print(request.session['userid']) 
                return JsonResponse({"message": "登录成功!", "code": "200"})
            else:
                return JsonResponse({"message": "密码错误!登录失败!", "code": "201"})
        except Exception as e:
            print(e)
            return JsonResponse({"message": "用户不存在!登录失败!", "code": "202"})

三、注册

1.前端html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <script src="./js/jquery-2.2.0.min.js"></script>
    <script>
        function fnRegister() {
            var username_label = document.getElementById('username');
            var phone_label = document.getElementById('phone');
            var password_label = document.getElementById('password');
            var cpassword_label = document.getElementById('cpassword');

            var user = {
                username: null,
                phone: null,
                password: null,
                cpassword: null,
            }

            user.username = username_label.value;
            user.phone = phone_label.value;
            user.password = password_label.value;
            user.cpassword = cpassword_label.value;

            $.ajax({
                url: "http://127.0.0.1:8000/app/register/",
                type: "POST",
                dataType: "json",
                data: user,
                success: function (response) {
                    if (response.code == '200') {
                        alert(response.message + "跳转到登录页面!")
                        console.log(response);
                        window.location.href = 'login.html';
                    } else {
                        alert(response.message)

                    }
                },
                error: function () {
                    console.log("请求失败!!!");
                }
            })

        }
    </script>
</head>

<body>
    用户名:<input type="text" id="username"><br>
    手机号:<input type="text" id="phone"><br>
    密码:<input type="password" id="password"><br>
    确认密码:<input type="password" id="cpassword"><br>
    <button onclick="fnRegister()">注册</button>
</body>

</html>

2.后端逻辑

# app/views.py
class RegisterView(View):

    def post(self, request):
        # 用户名username,手机号phone,密码password
        # put  delete

        # postman 测试:
        # 1.传参为raw格式时
        # 2.传参为x-www-form-urlencoded时

        print(request.POST)
        print("-------------------")
        print(request.body)

        # -------------------------------------------------
        # 1.传参为raw格式时
        # 字符串转成字典 通过decode解码
        # 使用put  delete时:
        # data = request.body.decode()
        # print("data:" + data)
        # # #***使用raw 传参数时***
        # import json
        # res_dict = json.loads(data)
        # print("username:" + res_dict.get('username'))
        #
        # username = res_dict.get('username')
        # password = res_dict.get('password')
        # phone = res_dict.get('phone')
        # cpassword = res_dict.get('cpassword')

        # -----------------------------------------------------------------
        # 2.传参为x-www-form-urlencoded时

        username = request.POST.get('username')
        password = request.POST.get('password')
        phone = request.POST.get('phone')
        cpassword = request.POST.get('cpassword')

        import re
        if re.match(r'^1[3-9]\d{9}$', phone):
            try:
                UserModel.objects.get(phone__exact=phone)
                return JsonResponse({'message': '用户已存在,请登录'})
            except:
                # 两次密码是否一致
                if password == cpassword:
                    user = UserModel()
                    user.name = username
                    user.password = password
                    user.phone = phone
                    user.save()
                    # 取决于逻辑
                    # request.session['']
                    return JsonResponse({'message': '注册成功'})
                else:
                    return JsonResponse({'message': '两次输入密码不一致'})
        else:
            return JsonResponse({'message': '手机号不满足规则'})


1.使用postman测试POST传参为raw格式时:
在这里插入图片描述


控制台输出:
在这里插入图片描述


2.使用postman测试POST传参为x-www-form-urlencoded时:
在这里插入图片描述


控制台输出:
在这里插入图片描述

最后遇到的一个小问题:

使用vscode测试前端页面时使用open in browser和open with live server,可能给会导致不同的结果,详情见下篇文章:VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser”!
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_48173416/article/details/139514384

django中ajax的get与post请求、javascript与jquery_qingwashuo的博客-爱代码爱编程

ajax介绍 Ajax(Asynchronous Javascript And XML:异步 JavaScript 和 XML),是指一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 但是A

django框架下用ajax发送post请求403forbidden解决方法_brokenleg的博客-爱代码爱编程

方法来自【Python建站】12.用户验证登录和官方文档,这里对方法进行总结方便参考和日后复习 环境:Django2.1+VueJS 插件:前端:reqwest 后端:Django REST framework 适用于

ajax的post请求出现403错误,在Django框架中发出Ajax Post请求时出现403禁止错误-爱代码爱编程

我正在尝试将jQuery集成到我使用Django框架制作的Web应用程序中。但是,我很难ajax打电话给上班族。我的模板文件包含处理ajax调用的html和javascript形式,如下所示: $(document).ready(function() { $( "#target" ).submit(function() { console.log

django ajax页面跳转,Django中的AJAX GET请求后重定向-爱代码爱编程

我是新的Django和AJAX(javascript)。 最后,我可以发送一些参数到Django视图。这个视图呈现一个编辑表单。 我发送的参数和视图响应的形式与我需要的信息,但我不能重定向到从视图呈现的形式。 AJAX温控功能:Django中的AJAX GET请求后重定向 $.ajax({ type:"GET", url: "/recepcion

django 基于jquery的ajax实现post请求_进击的铁甲小宝的博客-爱代码爱编程

Django 基于jquery的ajax实现post请求 Django url.pyfrom django.contrib import admin from django.urls import path from apps.message import views urlpatterns = [ path('admin/', admin.s

django web开发(九)ajax请求-爱代码爱编程

Ajax ajax get请求ajax post请求ajax 请求的返回值传输输入框数据数据多,批量输入 案例添加任务新建数据库和页面保存数据并进行数据校验 任务展示添加数据后自动刷新任务列表展示和翻页

解决django中ajax的post请求403错误-爱代码爱编程

解决方案一 ps:该js文件必须在引用jquery之后引用 $(document).ajaxSend(function (event, xhr, settings) { function getCookie(name) { var cookieValue = null; if (document.cookie &

django中使用ajax发送请求-爱代码爱编程

1、ajax简单介绍 浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求,特点是:页面刷新 除此之外,也可以基于ajax向后台发送请求(异步) 依赖jQuery 编写ajax代码 $.ajax(

ajax 把get请求改为post请求(django)_ajax get改post-爱代码爱编程

以下代码可以正常运行。(index.js文件) setInterval(function () { console.log( "kaishi" + timeText()) $.ajax( {

基于django的博客系统之增加类别导航栏(六)-爱代码爱编程

上一篇:基于Django的博客系统之用HayStack连接elasticsearch增加搜索功能(五) 下一篇: 功能概述 博客类型导航栏。 需求详细描述 1. 博客类型导航栏 描述: 在博客首页添加类型导航栏,用

django的path路径转换器-爱代码爱编程

本书1-7章样章及配套资源下载链接: https://pan.baidu.com/s/1OGmhHxEMf2ZdozkUnDkAkA?pwd=nanc  源码、PPT课件、教学视频等,可以从前言给出的下载信息下载,大家可以评估一下。 在Django框架中,默认内置了一组PATH路径转换器,具体介绍如下: str类型转换器:匹配任何非空字符串,但

python-爱代码爱编程

python-web应用程序-Django-From组件 添加用户时 原始方法(本质)【麻烦】 def user_add(req): if req.method == 'GET': return re