Django——Ajax

來源:互聯網
上載者:User

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

1.Ajax簡介

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

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

同步互動與非同步互動

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

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

Ajax的特點:

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

Ajax的優點:

  1. Ajax使用Javascirpt向伺服器發送非同步請求
  2. 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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: