python之路_popup功能實現實例

時間 2019-11-12

原文原文鏈接

　　如django中admin中添加數據時有這樣的一個功能，以下：html

　　爲實現如上的功能，咱們使用的並非ajax，而是popup，具體實現實例以下：ajax

視圖函數django

from django.shortcuts import render

def index(request):
    return render(request,'index.html')

def pop(request):
    if request.method == "GET":
        return render(request, 'pop.html')
    else:
        user = request.POST.get('user')
        return render(request,'pop_response.html',{'user':user})

一、訪問視圖函數index，渲染index頁面：函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="i1">無所謂</h1>
    <a href="#" onclick="popUp()">點我點我</a>

    <script>
        //回調函數，函數名隨便，獲取彈出頁面返回給的內容text
        function xxxpopupCallback(text) {
            document.getElementById('i1').innerHTML = text;
        }

        //事件函數，執行指定路徑對應的視圖（打開新頁面）
        function popUp() {
            //第一個'/pop/'指的是路徑，第二個'/pop/'爲別名，能夠隨便起
            window.open( '/pop/', '/pop/' ,"status=1, height:500, width:600, toolbar=0, resizeable=0");
        }
    </script>
</body>
</html>

　　如上，此頁面必須有兩個函數，一個事件函數，用於執行彈出新頁面的視圖；一個爲接收最終傳回來的回調函數。post

二、執行pop視圖後，渲染出彈出的那個頁面spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="post">
        {% csrf_token %}
        <input type="text" name="user">
        <input type="submit" value="保存">
    </form>
</body>
</html>

三、新頁面提交完數據，提交回原pop視圖，視圖處理完數據後，渲染一個新頁面，頁面的中與回調函數對應的函數負責返回數據及關閉彈出的新頁面。此頁面未展現顯示效果。3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>正在關閉</h1>
    <script>
        (function () {
            // 與原頁面回調函數名保持一致，傳遞數據，並關閉彈出的頁面
            opener.xxxpopupCallback("{{ user }}");
            window.close();
        })()
        
    </script>
</body>
</html>

　　以上便是實現popup整個流程，能夠根據實際需求進行完善使用。code

相關標籤/搜索

每日一句

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