欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Django中使用AJAX的詳細(xì)過程

 更新時(shí)間:2022年11月02日 12:16:27   作者:-一臉懵逼-  
在項(xiàng)目中前后端數(shù)據(jù)相互是一種常態(tài),下面這篇文章主要給大家介紹了關(guān)于Django中使用AJAX的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

AJAX

AJAX是前端技術(shù)的集合,包括JavaScript、XML、HTML、CSS等。

AJAX的作用

提升用戶體驗(yàn)。

JQuery

JQuery是一個(gè)兼容多種瀏覽器的JavaScript庫。

JQuery的作用

JQuery簡(jiǎn)化JavaScript的使用,同理,簡(jiǎn)化AJAX的使用。

在線鏈接

Django版本:3.0.6

JQuery版本:1.12.4

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>

AJAX的使用方法

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST請(qǐng)求僅返回HttpResponse值
    return render(request, 'error.html')  #GET請(qǐng)求返回error.html界面

error.html #使用error界面進(jìn)行測(cè)試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
    <br> 
	<input type="text" id="d1"> +
	<input type="text" id="d2"> =
	<input type="text" id="d3">
	<button id="btn">計(jì)算</button>
    <!-- 添加csrf_token -->
	{% csrf_token %} 
<script>
    $('#btn').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf變量將在data中傳參以避免403錯(cuò)誤
        // 朝后端發(fā)送ajax請(qǐng)求
        $.ajax({
            // 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
            url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
            // 2.請(qǐng)求方式
            type:'post',  // 不指定默認(rèn)就是get,都是小寫
            // 3.數(shù)據(jù)
            data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
            // 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā),args接受后端的返回結(jié)果
            success:function (args) {
                $('#d3').val(args)
            }
        })
    })
</script>
</body>
</html>

輸出效果:輸入2+2,點(diǎn)擊計(jì)算,異步計(jì)算結(jié)果為4并返回前端

X3倍后代碼

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST請(qǐng)求僅返回HttpResponse值
    return render(request, 'error.html')  #GET請(qǐng)求返回error.html界面

error.html #使用error界面進(jìn)行測(cè)試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
    <br> 
	<input type="text" id="d1"> +
	<input type="text" id="d2"> =
	<input type="text" id="d3">
	<button id="btn1">計(jì)算</button>
    <br> 
	<input type="text" id="d4"> +
	<input type="text" id="d5"> =
	<input type="text" id="d6">
	<button id="btn2">計(jì)算</button>
    <br> 
	<input type="text" id="d7"> +
	<input type="text" id="d8"> =
	<input type="text" id="d9">
	<button id="btn3">計(jì)算</button>
    <!-- 添加csrf_token -->
	{% csrf_token %} 
<script>
    $('#btn1').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf變量將在data中傳參以避免403錯(cuò)誤
        // 朝后端發(fā)送ajax請(qǐng)求
        $.ajax({
            // 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
            url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
            // 2.請(qǐng)求方式
            type:'post',  // 不指定默認(rèn)就是get,都是小寫
            // 3.數(shù)據(jù)
            data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
            // 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā),args接受后端的返回結(jié)果
            success:function (args) {
                $('#d3').val(args)
            }
        })
    })
    $('#btn2').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf變量將在data中傳參以避免403錯(cuò)誤
        // 朝后端發(fā)送ajax請(qǐng)求
        $.ajax({
            // 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
            url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
            // 2.請(qǐng)求方式
            type:'post',  // 不指定默認(rèn)就是get,都是小寫
            // 3.數(shù)據(jù)
            data:{'num1':$('#d4').val(), 'num2':$('#d5').val(),'csrfmiddlewaretoken': csrf},
            // 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā),args接受后端的返回結(jié)果
            success:function (args) {
                $('#d6').val(args)
            }
        })
    })
    $('#btn3').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf變量將在data中傳參以避免403錯(cuò)誤
        // 朝后端發(fā)送ajax請(qǐng)求
        $.ajax({
            // 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
            url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
            // 2.請(qǐng)求方式
            type:'post',  // 不指定默認(rèn)就是get,都是小寫
            // 3.數(shù)據(jù)
            data:{'num1':$('#d7').val(), 'num2':$('#d8').val(),'csrfmiddlewaretoken': csrf},
            // 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā),args接受后端的返回結(jié)果
            success:function (args) {
                $('#d9').val(args)
            }
        })
    })
</script>
</body>
</html>

輸出效果:分別輸入三組數(shù)值,點(diǎn)擊不同的計(jì)算,異步計(jì)算結(jié)果后根據(jù)點(diǎn)擊的計(jì)算返回前端

for循環(huán)后代碼

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST請(qǐng)求僅返回HttpResponse值
    return render(request, 'error.html')  #GET請(qǐng)求返回error.html界面

error.html #使用error界面進(jìn)行測(cè)試

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>

<body>
    {% for i in '369'|make_list %}  <!-- for循環(huán) -->
        <br>  <!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
        <input type="text" id="d{{i|add:-2}}"> +  <!-- id使用python計(jì)算 -->
        <input type="text" id="d{{i|add:-1}}"> =  <!-- id使用python計(jì)算 -->
        <input type="text" id="d{{i}}">  <!-- id使用python計(jì)算 -->
        <button class="btn" id="btn{{i}}">計(jì)算</button>  <!-- id使用python計(jì)算 -->
    {% endfor %}
    {% csrf_token %}  <!-- 添加csrf_token -->
    <script>
        $('.btn').click(function () {
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf變量將在data中傳參以避免403錯(cuò)誤
            var btn = $(this).attr('id')  //取id值
            var varnum1 = "#d"+(btn.replace("btn","")-2)  //取id值
            var varnum2 = "#d"+(btn.replace("btn","")-1)  //取id值
            var varnum3 = "#d"+(btn.replace("btn",""))  //取id值
            var num1 = $(varnum1).val()  //取id遞增序號(hào)值
            var num2 = $(varnum2).val()  //取id遞增序號(hào)值
            var num3 = $(varnum3).val()  //取id遞增序號(hào)值
            // 朝后端發(fā)送ajax請(qǐng)求
            $.ajax({
                // 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
                url: '', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
                // 2.請(qǐng)求方式
                type: 'post',  // 不指定默認(rèn)就是get,都是小寫
                // 3.數(shù)據(jù)
                data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
                // 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā),args接受后端的返回結(jié)果
                success: function (args) {
                    $(varnum3).val(args)
                }
            })
        })
    </script>
</body>

</html>

輸出效果:分別輸入三組數(shù)值,點(diǎn)擊不同的計(jì)算,異步計(jì)算結(jié)果后根據(jù)點(diǎn)擊的計(jì)算返回前端

輸入完成后單數(shù)據(jù)提交代碼

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST請(qǐng)求僅返回HttpResponse值
    return render(request, 'error.html')  #GET請(qǐng)求返回error.html界面

error.html #使用error界面進(jìn)行測(cè)試

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>

<body onclick="click()">
    {% for i in '369'|make_list %}
    <!-- for循環(huán) -->
    <br> <!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
    <input type="text" id="d{{i|add:-2}}"> +
    <!-- id使用python計(jì)算 -->
    <input type="text" id="d{{i|add:-1}}"> =
    <!-- id使用python計(jì)算 -->
    <input type="text" id="d{{i}}"> <!-- id使用python計(jì)算 -->
    <button class="btn" id="btn{{i}}">計(jì)算</button> <!-- id使用python計(jì)算 -->
    {% endfor %}
    {% csrf_token %}
    <!-- 添加csrf_token -->
    <script>
        $('.btn').click(function () {
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf變量將在data中傳參以避免403錯(cuò)誤
            var btn = $(this).attr('id')  //取id值
            var varnum1 = "#d" + (btn.replace("btn", "") - 2)  //取id值
            var varnum2 = "#d" + (btn.replace("btn", "") - 1)  //取id值
            var varnum3 = "#d" + (btn.replace("btn", ""))  //取id值
            var num1 = $(varnum1).val()  //取id遞增序號(hào)值
            var num2 = $(varnum2).val()  //取id遞增序號(hào)值
            var num3 = $(varnum3).val()  //取id遞增序號(hào)值
            // 朝后端發(fā)送ajax請(qǐng)求
            $.ajax({
                // 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
                url: '', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
                // 2.請(qǐng)求方式
                type: 'post',  // 不指定默認(rèn)就是get,都是小寫
                // 3.數(shù)據(jù)
                data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
                // 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā),args接受后端的返回結(jié)果
                success: function (args) {
                    $(varnum3).val(args)
                }
            })
        })
    </script>
    <script>
        document.addEventListener("mouseout", function (e) {  //獲取光標(biāo)事件
            var num = ($(e.target).attr('id')).replace("d", "").replace("btn", "")  //獲取光標(biāo)所在元素id
            if (num % 3 === 0) {
            }
            else if (num % 3 === 1) {
                num = parseInt(num) + 2
            }
            else if (num % 3 === 2) {
                num = parseInt(num) + 1
            }
            varnum = "#btn" + num
            $(varnum).click()
        });
        document.addEventListener("keydown", function (e) {  //獲取按鍵事件
            if ((e.keyCode == 9) || (e.keyCode == 32) || (e.keyCode == 13) || ((((e.keyCode == 83)) && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)))) {  //當(dāng)按鍵為Tab、Enter、Space、Ctrl+S時(shí)執(zhí)行操作
                var num = (document.activeElement.id).replace("d", "").replace("btn", "")  //獲取所在位置元素id
                if (num % 3 === 0) {
                }
                else if (num % 3 === 1) {
                    num = parseInt(num) + 2
                }
                else if (num % 3 === 2) {
                    num = parseInt(num) + 1
                }
                varnum = "#btn" + num
                $(varnum).click()
            }
        });
    </script>
</body>

</html>

輸出效果:值輸?shù)侥睦?,哪里就?huì)顯示出結(jié)果,無須點(diǎn)擊計(jì)算按鈕

最后把計(jì)算按鈕隱藏一下

    <button hidden class="btn" id="btn{{i}}">計(jì)算</button> <!-- id使用python計(jì)算 -->

本來還想做一下一鍵全部提交代碼、輸入完成后全數(shù)據(jù)提交代碼兩個(gè)功能,但發(fā)現(xiàn)這樣要提交的post值太多了,還是一次提交單個(gè)或單行數(shù)據(jù)比較靠譜

參考鏈接:

  • https://www.cnblogs.com/yangyi215/p/14964897.html
  • https://www.cnblogs.com/oldpai/p/9637774.html

總結(jié) 

到此這篇關(guān)于Django中使用AJAX的文章就介紹到這了,更多相關(guān)Django使用AJAX內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論