使用ajax進行前後臺的資料互動
阿新 • • 發佈：2018-11-19
1 什麼是ajax:
非同步的JavaScript和xml,跟後臺互動,都用json
2 ajax幹啥用的?
前後端做資料互動:
3 特點:
-非同步(非同步和同步的區別:同步是請求發過去,要等著迴應;非同步:不需要等迴應,可以進行其他操作)
-區域性重新整理:
4 使用ajax實現一個簡單的檔案上傳頁面
前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"></script> <title>Title</title> </head> <body> <form action="/files/" method="post" enctype="multipart/form-data"> <p>使用者名稱:<input type="text" name="name" id="name"></p> <p><input type="file" name="myfile" id="myfile"></p> <input type="submit" value="提交"> </form> <button id="btn">ajax提交檔案</button> </body> <script> $("#btn").click(function () { //上傳檔案,必須用FormData var formdata=new FormData(); formdata.append('name',$("#name").val()); //取出檔案$("#myfile")[0].files拿到的是檔案列表,取第0個把具體的檔案取出來 formdata.append('myfile',$("#myfile")[0].files[0]); $.ajax({ url:'/files_ajax/', type:'post', //不預處理資料,(name=lqz&age=18) processData:false, //指定往後臺傳資料的編碼格式(urlencoded,formdata,json) //現在用formdata物件處理了,就不需要指定編碼格式了,不要給我編碼了 contentType:false, data:formdata, success:function (data) { alert(data) } }) }) </script> </html>
後臺views.py中的頁面
def files_ajax(request): # 提交檔案從,request.FILES中取,提交的資料,從request.POST中取 name=request.POST.get('name') print(name) dic_files = request.FILES myfile = dic_files.get('myfile') with open(myfile.name, 'wb') as f: # 迴圈上傳過來的檔案 for line in myfile: # 往空檔案中寫 f.write(line) return HttpResponse('ok')
5 基於ajax提交json格式的資料(簡單的使用者登入認證)
前端頁面
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>登入驗證</title> <script src="/static/jquery-3.3.1.js"></script> </head> <body> <form> <p>使用者名稱:<input type="text" name="user" id="name"></p> <p>密碼:<input type="password" name="pwd" id="pwd"></p> </form> <button id="btn">提交</button> <p class="test"></p> </body> <script> $('#btn').click(function () { var dic = {'name':$('#name').val(),'pwd':$('#pwd').val()}; var msg = JSON.stringify(dic); var $test = $('.test'); $.ajax({ url:'/login/', type:'post', //指定請求的資料格式為json contentType:'application/json', data:msg, //指定響應的格式為json,注意如果後臺沒有放回json型別的資料格式下方的success不會執行 dataType:'json', success:function (res) { data = JSON.parse(res); if (data == '2'){ $test.text('登入失敗!') } else if (data == '1'){ location.href='https://www.baidu.com/' } } }); }); </script> </html>
後臺views.py中的內容
from django.shortcuts import render, redirect, HttpResponse
import json
from loginapp.models import *
# Create your views here.
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
if request.method == "POST":
msg = json.loads(request.body.decode('utf-8'))
print(msg)
res = User.objects.filter(user=msg['name'], pwd=msg['pwd']).first()
if res:
return HttpResponse(json.dumps('1'))
else:
return HttpResponse(json.dumps('2'))