一色桃子一区二区av,国产精品69无码一区二区,国产精品中文AV在线播放

主頁 > 知識庫 > django中的ajax組件教程詳解

django中的ajax組件教程詳解

Ajax(Asynchronous Javascript And XML)翻譯成英文就是“異步Javascript和XML”。即用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML，（現(xiàn)在使用更多的是json數(shù)據(jù)）。

向服務(wù)器發(fā)送請求的途徑

1.瀏覽器地址欄 http://www.baidu.com 默認(rèn)是get請求
2.form表單發(fā)送請求：
GET請求
POST請求
3.a標(biāo)簽 href屬性默認(rèn)是get請求
4.ajax()

Ajax的特點(diǎn)

異步交互：客戶端發(fā)送一個(gè)請求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)送第二個(gè)請求；

局部刷新：瀏覽器頁面局部刷新

局部刷新的意思就是當(dāng)咱們在博客園注冊一個(gè)新的博客的時(shí)候，當(dāng)咱們輸入用戶名后鼠標(biāo)移開的時(shí)候，就發(fā)送了一個(gè)請求，去驗(yàn)證這個(gè)用戶是否存在，如果存在，則通知用戶該用戶名已經(jīng)被注冊了。

基于jquery實(shí)現(xiàn)的ajax請求

讓我們使用pycharm重新創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目名為Ajax_demo，應(yīng)用名為app01。

# url控制器
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
  path('admin/', admin.site.urls),
  path('index/', views.index),
  path('test_ajax/', views.test_ajax),
]

那么當(dāng)我們需要有對應(yīng)的視圖函數(shù) index和test_ajax：

# app01-->views.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
  return render(request, 'index.html')
def test_ajax(request):
  return HttpResponse('hello!world!')

在這里匹配了相應(yīng)的視圖然后返回了一個(gè)html頁面：

# index.html
!DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>Title/title>
  script src="http://code.jquery.com/jquery-2.1.1.min.js">/script>
/head>
body>
  h3>功能1：發(fā)送ajax請求/h3>
  p class="content">/p> //這里的內(nèi)容是空的
  button class="btn">ajax/button>
  script>
    $('.btn').click(function(){
      $.ajax({
        url:'/test_ajax/',
        type:'get',
        success:function(data){
          $('.content').html(data)
        }
      })
    })
  /script>
/body>
/html>

這句話的意思是，當(dāng)咱們點(diǎn)擊button按鈕的時(shí)候，觸發(fā)了點(diǎn)擊動作，然后發(fā)送了一個(gè)ajax請求，讓我們先看看此時(shí)是什么樣子的：

當(dāng)我們點(diǎn)擊了按鈕的時(shí)候，就發(fā)送了一個(gè)ajax請求：

此時(shí)一個(gè)簡單的ajax請求就發(fā)送完成了。

利用ajax實(shí)現(xiàn)計(jì)算器

首先咱們的index.html中進(jìn)行布局：

# index.html
h3>功能2：利用ajax實(shí)現(xiàn)的計(jì)算器/h3>
  input type="text" class="num1">+input type="text" class="num2">=input type="text" id="sum">button class="cal">計(jì)算/button>
    $('.cal').click(function(){
      $.ajax({
        url:'/cal/',
        type:'post',
        data:{
          'n1':$('.num1').val(),
          'n2':$('.num2').val(),
        },
        success:function(data){
          console.log(data);
          $('#sum').val(data);
        }
      })
    })

然后咱們拿到了n1和n2的值，通過請求url發(fā)送給相應(yīng)的視圖然后進(jìn)行數(shù)據(jù)處理，最后拿到結(jié)果再返回給這個(gè)ajax。

# views.py

def cal(request):
  print(request.POST)
  n1 = int(request.POST.get('n1'))
  n2 = int(request.POST.get('n2'))
  sum = n1+n2
  return HttpResponse(sum)

此時(shí)的url控制器需要新添加一條：

path('cal/', views.cal),

其次是配置文件settings中的這一行需要注釋掉：

# 'django.middleware.csrf.CsrfViewMiddleware',

此時(shí)再查看結(jié)果：

利用ajax實(shí)現(xiàn)登陸認(rèn)證

首先咱們要開一個(gè)路由，當(dāng)用戶在瀏覽器輸入http://127.0.0.1/login_btn/的時(shí)候，就匹配導(dǎo)對應(yīng)的視圖，所以：

# url控制器
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
  path('admin/', admin.site.urls),
  path('index/', views.index),
  path('test_ajax/', views.test_ajax),
  path('cal/', views.cal),
  path('login/', views.login),
  path('login_btn/', views.login_btn),
]
# login_btn函數(shù)
def login_btn(request):
  return render(request, 'login_btn.html')

然后返回了這個(gè)html頁面：

!DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>Title/title>
  script src="http://code.jquery.com/jquery-2.1.1.min.js">/script>
/head>
body>
  h3>利用ajax實(shí)現(xiàn)登陸認(rèn)證/h3>
  form action="">
    用戶名 input type="text" class="user">
    密碼 input type="password" class="pwd">
    input type="button" value="submit" class="login_btn">
    span class="error">/span>
  /form>
  script>
    $('.login_btn').click(function(){
      $.ajax({
        url:'/login/',
        type:'post',
        data:{
          'user':$('.user').val(),
          'pwd':$('.pwd').val(),
        },
        success:function(data){
          //此時(shí)需要進(jìn)行轉(zhuǎn)換
          console.log(typeof(data));
          var data = JSON.parse(data)
          console.log(typeof(data));
          if (data.user){
            location.
          }else{
            $('.error').html(data.msg).css({'color':'red'})
          }
        }
      })
    })
  /script>
/body>
/html>

最后ajax將請求提交到了/login/中，然后進(jìn)行匹配視圖，然后就開始執(zhí)行對應(yīng)代碼：

def login(request):
  # print(request.POST)
  user = request.POST.get('user')
  pwd = request.POST.get('pwd')
  from .models import User
  user = User.objects.filter(user=user, pwd=pwd).first()
  ret = {
    'user': None,
    'msg': None
  }
  if user:
    ret['user'] = user.user
  else:
    ret['msg'] = 'username or password is wrong!'
  import json
  return HttpResponse(json.dumps(ret))

首先打開瀏覽器，輸入錯誤的用戶名和密碼：

然后開始輸入正確的用戶名和密碼，就會直接跳轉(zhuǎn)到百度的首頁了。

利用form表單進(jìn)行文件上傳

# urls.py
path('file_put/', views.file_put),
# views.py
# 文件的上傳
def file_put(request):
  if request.method == 'POST':
    print(request.POST)
  return render(request, 'file_put.html')
# file_put.html
!DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>文件上傳/title>
/head>
body>
  h3>基于form表單實(shí)現(xiàn)的文件上傳/h3>
  form action="" method="post" enctype="multipart/form-data">
    用戶名 input type="text" name="user">
    頭像 input type="file" name="avatar">
    input type="submit">
  /form>
/body>
/html>

此時(shí)咱們輸入完用戶名和選中完圖片后，點(diǎn)擊提交咱們查看下打印的信息。

那么是我們的圖片沒有上傳過來嗎？當(dāng)然不是的，是因?yàn)樯蟼鞯膱D片就不在這里面。讓我們在views.py中執(zhí)行這個(gè)代碼：

print(request.FILES)

看到的是這個(gè)樣子：

那么此時(shí)我們就可以確定，這個(gè)文件是上傳過來了，存放在request.FILES中，那么咱們使用request.FILES.get就可以把這個(gè)圖片對象拿到了。

# views.py
 def file_put(request):
  if request.method == 'POST':
    print(request.POST) #
    # print(request.body)
    print(request.FILES) # 圖片信息
    # 將文件給取出來
    img_obj = request.FILES.get('avatar')
    with open(img_obj.name, 'wb') as f:
      for line in img_obj:
        f.write(line)
    return HttpResponse('ok!')
  return render(request, 'file_put.html')

那么此時(shí)直接上傳的話，那么就會在當(dāng)前項(xiàng)目下展示這張照片。

利用ajax實(shí)現(xiàn)文件上傳

首先我們需要新開一個(gè)url或者將之前的注釋掉：

# urls.py
path('file_put/', views.file_put),

ajax提交文件的方式同樣使用form表單，但是不需要給input設(shè)置name屬性，只需要設(shè)置class或者id就可以了：

# file_put.html
  form action="" method="post">
    用戶名 input type="text" id="user">
    頭像 input type="file" id="avatar" >
    input type="button" class="btn" value="ajax">
  /form>

那么咱們需要給btn設(shè)置點(diǎn)擊click動作：

$('.btn').click(function(){
  
    //涉及到文件上傳 需要創(chuàng)建formdata對象
    var formdata = new FormData();
    formdata.append('user',$('#user').val());
    formdata.append('avatar',$('#avatar')[0].files[0]);

    $.ajax({
      url:'',
      type:'post',
      contentType:false, // 交給FormData處理編碼
      processData:false, //對數(shù)據(jù)是否進(jìn)行預(yù)處理 如果不做預(yù)處理的話 就不做任何編碼了
      data:formdata,
      success:function(data){
        console.log(data)
      }
    })
  })

最后在試圖函數(shù)中進(jìn)行文件保存操作：

def file_put(request):
  if request.method == "POST":
    print("body", request.body) # 請求報(bào)文中的請求體 json
    print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數(shù)據(jù)
    print('FILES', request.FILES)
    file_obj=request.FILES.get("avatar")
    with open(file_obj.name,"wb") as f:
      for line in file_obj:
        f.write(line)
    return HttpResponse("OK")
  return render(request, "file_put.html")
Content-Type

在咱們剛剛的form表單的文件上傳和ajax文件上傳的時(shí)候，都涉及到一個(gè)請求頭的東西，這個(gè)東西是什么呢？這個(gè)東西決定著服務(wù)器會按照哪種編碼格式給你解碼，當(dāng)你默認(rèn)不寫的時(shí)候，此時(shí)的請求頭是：application/x-www-form-urlencoded，當(dāng)你想發(fā)送文件類的東西，此時(shí)的請求頭應(yīng)該是：form-data......

當(dāng)服務(wù)器收到客戶端發(fā)送過來的請求時(shí)，首先就會去查看請求頭，判斷你的請求頭是什么，然后進(jìn)行解碼。

讓我們分別看下這幾個(gè)請求頭：

x-www-form-urlencoded

application/x-www-form-urlencoded：表單數(shù)據(jù)編碼為鍵值對，分隔，可以當(dāng)成咱們的GET請求中?后面的數(shù)據(jù)，讓我們發(fā)送一個(gè)庶幾乎看看：

form action="" method="post"> 用戶名 input type="text" name="user"> 密碼 input type="password" name="pwd"> input type="submit" value="submit"> /form>

那么我們需要一個(gè)視圖函數(shù)還進(jìn)行處理：

def file_put(request):
  if request.method == "POST":
    print("body", request.body) # 請求報(bào)文中的請求體 json
    print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數(shù)據(jù)
    return HttpResponse("OK")
  return render(request, "file_put.html")

當(dāng)我們在瀏覽器輸入admin和123的時(shí)候，讓我們來看下打印的結(jié)果是什么：

我們剛剛說過，當(dāng)我們請求頭什么都不寫的話，那么就是默認(rèn)的x-www-form-urlencoded,當(dāng)請求頭是這種的話，此時(shí)我們打印request.POST是有值的，也就這一種請求方式request.POST才有值。

讓我們現(xiàn)在發(fā)送一個(gè)json的數(shù)據(jù)

!DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>Title/title>
  script src="http://code.jquery.com/jquery-2.1.1.min.js">/script>
/head>
body>
form action="" method="post">
  用戶名 input type="text" class="user">
  密碼 input type="password" class="pwd">
  input type="button" value="submit" class="btn">
/form>
script>
  $('.btn').click(function(){
    $.ajax({
      url:'',
      type:'post',
      data:JSON.stringify({
        a:1,
        b:2
      }),
      success:function(data){
        console.log(data)
      }
    })
  })
/script>
/body>
/html>

視圖函數(shù)中是這樣的：

def send_json(request):
  if request.method == 'POST':
    print('body', request.body)
    print('post', request.POST)
    print('files', request.FILES)
    return HttpResponse('ok!')
  return render(request, 'send_json.html')

當(dāng)我們發(fā)送數(shù)據(jù)的時(shí)候，通過解碼收到的就是這樣的數(shù)據(jù)：

就和我們剛剛說的一樣，當(dāng)請求頭是x-www-form-urlencoded的時(shí)候，request.POST才會有數(shù)據(jù)，其他的就沒有。

總結(jié)

以上所述是小編給大家介紹的django中的ajax組件教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Django中的forms組件實(shí)例詳解
基于Django的ModelForm組件(詳解)
Python的Django中django-userena組件的簡單使用教程
使用Python的Django框架中的壓縮組件Django Compressor
django admin組件使用方法詳解
Django組件content-type使用方法詳解

標(biāo)簽：金華溫州清遠(yuǎn) 萊蕪綏化紹興安康呼倫貝爾

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《django中的ajax組件教程詳解》，本文關(guān)鍵詞 django,中的,ajax,組件,教程,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。