1. 程式人生 > 遊戲 >能買到是關鍵!Xbox Series S成黑五期間最火爆主機

能買到是關鍵!Xbox Series S成黑五期間最火爆主機

- ajax

  往後臺提交資料,form表單標籤

  js語言中封裝的一個傳送http請求的模組,xmlhttprequest物件,經過jquery的封裝起名為ajax

  AJAX 不需要任何瀏覽器外掛,但需要使用者允許JavaScript在瀏覽器上執行。

  a.同步互動:客戶端發出一個請求後,需要等待伺服器響應結束後,才能發出第二個請求;

  b.非同步互動:客戶端發出一個請求後,無需等待伺服器響應結束,就可以發出第二個請求。

   AJAX除了非同步的特點外,還有一個就是:瀏覽器頁面區域性重新整理;(這一特點給使用者的感受是在不知不覺中完成請求和響應過程

- ajax應用場景:

  1.我們在登入或者註冊某網站使用者時經常會輸入使用者名稱,密碼,郵箱地址,手機號,身份證號...等等,如果我們輸入了一堆資訊點選提交但發現有一項輸入錯誤了,這時你點提交了那麼可能之前輸入的資訊全沒有了,還得重新再輸入一遍,你肯定會覺得很不爽,瞬間沒有了再瀏覽下去的心情了吧,那這是怎麼回事呢?之前輸入的資訊怎麼就沒有了呢,這是因為你點選提交後整個網頁重新整理了,所以之前輸入的資訊全沒有了,這就是沒有使用ajax技術,那麼ajax是什麼?它就是一個非同步的網頁區域性刷新技術,像剛才那種情況如果使用了Ajax技術,那麼我們點選提交之後只會提示我們輸入錯誤的那一項,而其他輸入的資訊依然還在,我們只需要修改輸入錯誤的那項再次提交就可以了,是不是覺得比之前的好多了,這就是ajax.

示例程式碼:

def login(request):

    if request.method == 'GET':
        # return render(request, 'login.html')
        ret = render(request, 'login.html')
        # 修改響應狀態碼
        ret.status_code = 202
        #
        return ret

ajax程式碼

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="
UTF-8"> <title>Title</title> <style> .error{ color:Red; font-size: 12px; } </style> </head> <body> <form action="" method="post"> 使用者名稱: <input type="text" name="username"> 密碼: <input type="password" name="password"> <input type="submit"> </form> <hr> 使用者名稱: <input type="text" id="uname"> 密碼: <input type="password" id="pwd"> <span class="error"></span> <button id="btn">ajax提交</button> </body> <script src="{% static 'jquery.js' %}"></script> <script> // ajax傳送請求提交資料 $('#btn').click(function () { var uname = $('#uname').val(); var pwd = $('#pwd').val(); $.ajax({ {#url:'http://127.0.0.1:8001/ajax_login/', // 請求路徑 絕對路徑 #} url:'/ajax_login/', // 請求路徑 相對路徑 type:'post', // 請求方法,小寫 {#data:{a:1,b:2}, // 請求攜帶資料#} data:{username:uname, password:pwd}, // 接受請求成功之後的響應資料的,res接受到的就是響應資料, // ajax會判斷響應狀態碼,當狀態碼為2xx,3xx等時,那麼表示請求和響應是正常的,那麼ajax會將響應資料進行加工,並傳遞給success對應的匿名函式作為他的引數,也就是我們下面定義的res形參 success:function (res) { console.log('success>>>>',res); {#alert('登入成功!!!!恭喜恭喜!!!');#} location.href = '/home/' //訪問home路徑,使用的瀏覽器的機制 //if (res === 'okk'){ // alert('登入成功!!!!恭喜恭喜!!!'); //}else { // $('.error').text('使用者名稱或者密碼有誤!!!'); //} }, // 當狀態碼為4xx(請求錯誤),5xx(服務端錯誤)等時,那麼ajax會加工響應資料並傳遞給error對應的函式 error:function (error) { console.log('error>>>>',error); if (error.status === 400){ alert('使用者名稱或者密碼有誤!!'); {#$('.error').text('使用者名稱或者密碼有誤!!!');#} } } }); }) </script> </html>

檢視程式碼

from django.shortcuts import render, redirect, HttpResponse

# Create your views here.

def login(request):

    if request.method == 'GET':

        # return render(request, 'login.html')
        ret = render(request, 'login.html')
        # 修改響應狀態碼
        # ret.status_code = 202
        #
        return ret
    else:
        print(request.POST)
        username = request.POST.get('username')
        password = request.POST.get('password')
        if username == 'root' and password == '123':
            return render(request, 'home.html')
        return redirect('/login/')  # 預設使用的狀態碼就是302



def ajax_login(request):

    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        print('ajax>>>>>', request.POST)
        # ajax>>>>> <QueryDict: {'username': ['xxx'], 'password': ['ooo']}>
        username = request.POST.get('username')
        password = request.POST.get('password')
        if username == 'root' and password == '123':
            # HttpResponse預設狀態碼為200
            return HttpResponse('okk')
            # return render(request, 'home.html')
        # return redirect('/login/')
        else:
            ret = HttpResponse('not ok')
            ret.status_code = 400
            return ret



def home(request):
    return render(request, 'home.html')

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^ajax_login/', views.ajax_login),
    url(r'^home/', views.home),
]