Django——Ajax

最後更新：2018-08-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：pass 頁面 cts 需要 ons BMI https 1.2 set

1.Ajax簡介

AJAX（Asynchronous Javascript And XML)——“非同步JavaScript與XML”。

Ajax使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（時至今日，傳輸的資料更多為Json格式）。

同步互動與非同步互動

同步互動：用戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；

非同步互動：用戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。

Ajax的特點：

非同步互動
瀏覽器頁面局部重新整理

Ajax的優點：

Ajax使用Javascirpt向伺服器發送非同步請求
Ajax無須重新整理整個頁面

2.基於jQuery的Ajax實現2.1 最基礎的Ajax代碼實現2.1.1模板

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">    </script></head><body><div class="content"></div><button class="Ajax">Ajax</button><script>    $(".Ajax").click(function () {        $.ajax({                url: '/test/',                type: 'get',                success: function (data) {                    $('.content').html(data)                }            }        )    })</script></body></html>

2.1.2 視圖

from django.shortcuts import render,HttpResponse# Create your views here.def index(request):    return render(request,'index.html')def test(request):    return HttpResponse('hello Ajax')

實現效果：

2.2基於Ajax的計算機2.2.1模板

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">計算</button> $('.cal').click(function () {        $.ajax({            url:'/cal/',            type:'post',            data:{                'n1':$('#num1').val(),                'n2':$('#num2').val(),            },            success:function (data) {                console.log(data);                $('#ret').val(data);            }        })    })

2.2.2視圖

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

實現效果：

2.3基於Ajax的登陸組件2.3.1模板

<form >    使用者名稱 <input type="text" id="user">    密碼 <input type="password" id="pwd">    <input type="button" value="submit" class="login_btn"><span class="error"></span></form> $('.login_btn').click(function () {        $.ajax({            url:"/login/",            type:'post',            data:{                'user':$('#user').val(),                'pwd':$('#pwd').val(),            },            success:function(data){                console.log(data);                console.log(typeof data);                var data=JSON.parse(data);                console.log(data);                console.log(typeof data);                if (data.user){                    location.href='http://www.baidu.com'                }                else {                    $(".error").html(data.msg).css({"color":'red',"margin-left":'10px'})                }            }        })    })

2.3.2視圖

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

Django——Ajax

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More