Django Ajax

時間 2019-11-22

標籤 django ajax 欄目 Python 简体版

原文原文鏈接

1、什麼是 AJAX ？

AJAX = 異步 JavaScript 和 XML。 AJAX 是一種用於建立快速動態網頁的技術。 經過在後臺與服務器進行少許數據交換，AJAX 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。 傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。 AJAX 不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。 同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求； 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。

2、AJAX 工做原理

前端綁定的事件觸發，向後端發送一個請求 後端接收請求，並處理獲得相應的結果，將其發送至前端 前端接收返回結果，顯示在原先網頁界面

3、Ajax傳輸的數據

1.Ajax字符串格式html

符合語法規範的json對象(json只認雙引的字符串格式)： ["one", "two", "three"] { "one": 1, "two": 2, "three": 3 } {"names": ["張三", "李四"] } [ { "name": "張三"}, {"name": "李四"} ]

2.stringfy與parse方法前端

JavaScript中關於JSON對象和字符串轉換的兩個方法： JSON.parse(): 用於將一個 JSON 字符串轉換爲 JavaScript 對象(json只認雙引的字符串格式) JSON.parse('{"name":"Howker"}'); JSON.parse('{name:"Stack"}') ; // 錯誤 JSON.parse('[18,undefined]') ; // 錯誤 JSON.stringify(): 用於將 JavaScript 值轉換爲 JSON 字符串。 JSON.stringify({"name":"Tonny"})

4、舉個例子

<!--頁面輸入兩個整數，經過AJAX傳輸到後端計算出結果並返回。-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="b1">Ajax Test</button>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    $('#b1').click(function () {
        $.ajax({
            url:'',
            type:'POST',
            data:{i1:$('#i1').val(),i2:$('#i2').val()},
            success:function (data) {
                $('#i3').val(data)
            }
        })
    })

</script>
</body>
</html>

html頁面

# views.py
def ajax_test(request):
    if request.method=='POST':
        i1=request.POST.get('i1')
        i2=request.POST.get('i2')
        ret=int(i1)+int(i2)
        return HttpResponse(ret)
    return render(request,'ajax_test.html')

# urls.py
from django.conf.urls import url
from app01 import views
urlpatterns=[
    url(r'^ajax_test/',views.ajax_test),
]

後續的內容還會寫的......

相關標籤/搜索

django+ansible+ajax

django+jquery+ajax+post

python3+pycharm+django+django

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。