网站建设过程中要注意的事项,山西省吕梁市天气,本地南昌网站建设,文案代写收费标准系列文章目录
以下几篇侧重点为JavaScript内容0.0
JavaScript入门宝典#xff1a;核心知识全攻略#xff08;上#xff09;JavaScript入门宝典#xff1a;核心知识全攻略#xff08;下#xff09;Django框架中Ajax GET与POST请求的实战应用VSCode调试揭秘#xff1a;L…
系列文章目录
以下几篇侧重点为JavaScript内容0.0
JavaScript入门宝典核心知识全攻略上JavaScript入门宝典核心知识全攻略下Django框架中Ajax GET与POST请求的实战应用VSCode调试揭秘Live Server助力完美测试Cookie与Session远超“Open in Browser” 文章目录 系列文章目录前言一、跨域二、登录1.前端html2.后端逻辑 三、注册1.前端html2.后端逻辑最后遇到的一个小问题 前言 在本博客中我们将通过登录注册两个实战案例深入探讨如何在Django项目中使用Ajax进行网络请求以实现数据交互。同时我们还将详细解析如何利用Cookie和Session来管理用户状态确保用户信息的安全性和一致性。 一、跨域 跨域问题参考下面这篇文章 跨域问题与Django解决方案深入解析跨域原理、请求处理与CSRF防护 二、登录
1.前端html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleLogin/titlescript src./js/jquery-2.2.0.min.js/scriptscriptfunction 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 }, //设置支持携带cookiesuccess: 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
/headbodyinput typetext idusername placeholder请输入用户名:brinput typetext idpassword placeholder请输入密码:brinput typebutton valueLogin onclickfnLogin();/body/html2.后端逻辑
# 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(usernameusername)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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleRegister/titlescript src./js/jquery-2.2.0.min.js/scriptscriptfunction 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
/headbody用户名input typetext idusernamebr手机号input typetext idphonebr密码input typepassword idpasswordbr确认密码input typepassword idcpasswordbrbutton onclickfnRegister()注册/button
/body/html2.后端逻辑
# 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 reif re.match(r^1[3-9]\d{9}$, phone):try:UserModel.objects.get(phone__exactphone)return JsonResponse({message: 用户已存在请登录})except:# 两次密码是否一致if password cpassword:user UserModel()user.name usernameuser.password passworduser.phone phoneuser.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”
