Django 系列博客（十四）
阿新 • • 發佈：2019-01-20
loaded async kit 情況 情況下 好的 sta mda response
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 提交數據的方式了。瀏覽器的原生
Django 系列博客（十四）