1. 程式人生 > 其它 >行業應用丨汙染源工況監管系統助力生態環境執法精準化

行業應用丨汙染源工況監管系統助力生態環境執法精準化

目錄

介紹

Ajax請求兩大特點和優點 非同步、區域性重新整理 bootcdn 中文文件 在這個地址可以獲jquery

區域性重新整理案例

  • 模版
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        // 匯入jquery
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    
        <style>
            .err{
                color: red;
            }
        </style>
    
    </head>
    <body>
    <h3>註冊頁面</h3>
    <form action="">
        <p>使用者名稱 <input type="text" class="user"> <span class="err"></span></p>
    
    </form>
    <script>
        // 定義一個匿名函式 繫結一個時間 失去焦點 觸發該匿名函式
        $(".user").blur(
            function () {
                // 基於jquery傳送Ajax請求
                $.ajax({
                    // 可以是絕對路徑 也可以是相對路徑
                    url: "/app01/username_auth/",
                     // 請求方法
                    type:"post",
                     // 請求資料
                    data: {
                        "user":$(".user").val()
                    },
                    // 發起Ajax請求成功後 響應回來的時候會觸發該匿名函式
                    success: function(res) {
                        // 通過dom操作 將返回的資料渲染到區域性頁面
    
                        if (res.exist) {
                            $(".err").html(res.msg)
                        }
                        else {
                            $(".err").html("")
                        }
                    },
    
                    error: function(err) {
    
                    }
    
                })
            }
        )
    
    
    </script>
    
    </body>
    </html>
    
  • 檢視
    def user_auth(request):
    
        user = request.POST.dict()["user"]
        select_user = User.objects.filter(name=user)
        res ={"exist":False,"msg":""}
        if select_user:
            res["exist"] = True
            res["msg"] = "使用者已存在"
    
        return JsonResponse(res)
    

非同步

比如說檢視有個強制等待10秒 瀏覽器位址列請求就要一值在哪等 Ajax請 他是不會影響其他操作 觸發請求後 不影響操作其他的