Django 系列博客(十四)
程序员文章站
2022-07-04 17:47:15
Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互。 什么是 ajax ajax(Asynchronous Javascript And XML)翻译成中文就是‘’异步 JavaScript 和 XML‘’。即使用 JavaScript 语言与服务器 ......
django 系列博客(十四)
前言
本篇博客介绍在 html 中使用 ajax 与后台进行数据交互。
什么是 ajax
ajax(asynchronous javascript and xml)翻译成中文就是‘’异步 javascript 和 xml‘’。即使用 javascript 语言与服务器进行异步交互,传输的数据为 xml(现在更多地使用 json)。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,也能发出第二个请求。
ajax 除了异步的特点外,还有一个就是:浏览器页面局部刷新。在页面没有进行刷新的情况下进行数据交互。
优点:
- ajax 使用javascript 技术向服务器发送异步请求;
- ajax 无需刷新整个页面。
基于 jquery 的 ajax 实现
前端代码
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="/static/jquery-3.3.1.js"></script> <title>regist</title> {# <link rel="stylesheet" href="/static/jquery-3.3.1.js">#} </head> <body> <p>用户:<input type="text" id="name"></p> <p>密码:<input type="password" id="pwd"></p> <p>确认密码:<input type="password" id="tpwd"></p> <input type="button" id="submit" value="提交"><span id="error"></span> </body> <script> $('#submit').click(function () { console.log($('#submit')); {#$.ajax({#} {# url:'/regist/',#} {# type:'post',#} {# data:{name:$("#name").val(), pwd:$("#pwd").val(), tpwd:$("#tpwd")},#} {# success:function (data) {#} {# console.log(data)#} {# }#} $.ajax({ url:'/regist/', type:'post', data:{name:$("#name").val(), pwd:$("#pwd").val(), tpwd:$("#tpwd").val()}, success:function (data) { console.log(data) } }) }) </script> </html>
后端代码
from django.http import jsonresponse from django.shortcuts import render, redirect from app01.models import * # create your views here. def wrapper(func): def inner(*args, **kwargs): if args[0].method == 'get': return func(*args, **kwargs) elif kwargs['contenttype'] == 'application/json': import json args[0].post = json.loads(args[0].body) return func(*args, **kwargs) else: return func(*args, **kwargs) return inner import json # json.loads() def regist(request): dic = {'status': 200, 'msg': none} print(request.body) if request.method == 'get': return render(request, 'regist.html') else: print('/////') print(request.post, 'dddd') name = request.post.get('name') pwd = request.post.get('pwd') tpwd = request.post.get('tpwd') user = userinfo.objects.filter(name=name).first() if user: dic['status'] = 100 dic['msg'] = '用户已存在' return jsonresponse(dic) else: if name and pwd and tpwd: if pwd == tpwd: userinfo.objects.create(name=name, pwd=pwd) dic['msg'] = '注册成功' return jsonresponse(dic) else: dic['status'] = 101 dic['msg'] = '两次密码不一样' return jsonresponse(dic) else: dic['status'] = 101 dic['msg'] = '密码不正确' return jsonresponse(dic) @wrapper def login(request): dic = {'status': 200, 'msg': none} if request.method == 'get': return render(request, 'login.html') else: name = request.post.get('name') pwd = request.post.get('pwd') user = userinfo.objects.filter(name=name).first() if not user: dic['status'] = 100 dic['msg'] = '用户不存在,请注册' return jsonresponse(dic) else: if pwd == user.pwd: dic['msg'] = '登陆成功' return jsonresponse(dic) else: dic['status'] = 101 dic['msg'] = '密码错误' return jsonresponse(dic)
js代码
$("#submit3").click(function () { $.ajax({ url: '/auth/', type: 'post', data: { 'user': $("#id_name").val(), 'password': $('#id_password').val() }, success: function (data) { {#console.log(data)#} var data=json.parse(data) if (data.user){ location.href='https://www.baidu.com' }else { $(".error").html(data.message).css({'color':'red','margin-left':'20px'}) } } }) } )
文件上传
请求头
- application/x-www-form-urlencoded
这是最常见的 post 提交数据的方式了。浏览器的原生
下一篇: [寒假学习笔记](二)Python初学
推荐阅读
-
LNMP系列教程之 SSL安装WordPress博客(程序下载与安装)
-
Django系列---使用MySql数据库
-
《Dotnet9》系列之建站-中文站最好WordPress主题,自媒体,博客,企业,商城主题一网打尽
-
python(十四):Django之url和views
-
Flutter 即学即用系列博客——04 Flutter UI 初窥
-
Python使用Django实现博客系统完整版
-
Flutter 即学即用系列博客——01 环境搭建
-
SLAM+语音机器人DIY系列:(八)高阶拓展——2.centos7下部署Django(nginx+uwsgi+django+python3)
-
Django+Bootstrap+Mysql 搭建个人博客 (六)
-
基于django的个人博客网站建立(六)