AJAX 与 Python 后台通信

Ajax 简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

与python后台案例

HTML 代码

<style>

        #big_div {

            display: none;

            background: #e4b9b9;

            position: absolute;

            width: 30%;

            height: 30%;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            -moz-box-shadow: 10px 10px 50px #909090;

            -webkit-box-shadow: 10px 10px 50px #909090;

            box-shadow: 10px 10px 50px #909090;

            border-radius: 5px;

        }

</style>

<div class="container">

    <!-- 1st section -->

    <section class="row tm-section">

        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 p-0">

            <div class="tm-flex-center p-5 tm-bg-color-primary tm-section-min-h">

                <h1 id="my_time" class="tm-text-color-white tm-site-name" style="font-size: 30px">ESchool 树洞 一路有你</h1>

            </div>

        </div>

        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">

            <div class="tm-flex-center p-5">

                <q id="my_text" class="tm-quote tm-text-color-gray">
　　　　　　　　　　　　啦啦啦啦啦</q>

            </div>

        </div>

    </section>

    <audio src="../static/music/shudong.mp3" autoplay loop controls>抱歉，背景音乐暂时不能播放···</audio>

</div>

JavaScript 代码

var div = document.getElementById("big_div");

var will_put = document.getElementById("will_put");

var put_text = document.getElementById("put");

var mytext = document.getElementById("mytext");

document.getElementById("btn_close").onclick = function () {

    div.style.display = "none";

};

will_put.onclick = function () {

    div.style.display = "block";

}

put_text.onclick = function () {

    function put_data() {

        var xhr = new XMLHttpRequest();

        xhr.open('GET', '/put_shudong.html?txt=' + mytext.value, true);

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4 && xhr.status == 200) {

                change_data(xhr.responseText);

            }

        };

        xhr.send();

    };

    put_data();

    mytext.value=""

    div.style.display = "none";

}

中间弹窗案例：

html 代码

<style>

        #big_div {

            display: none;

            background: #e4b9b9;

            position: absolute;

            width: 30%;

            height: 30%;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            -moz-box-shadow: 10px 10px 50px #909090;

            -webkit-box-shadow: 10px 10px 50px #909090;

            box-shadow: 10px 10px 50px #909090;

            border-radius: 5px;

        }

        #mytext {

            width: 100%;

            height: 60%;

            line-height: 30px;

            font-size: 25px;

            word-wrap: break-word;

        }

        #put {

            margin: 5px;

        }

</style>

<div id="big_div">

    <p style="text-align: right">

        <span style="color: #8c8c8c;font-size: 15px">©ESchool 树洞 感恩,一路有你 </span>

        <button id="btn_close" style="background: none;border:none;">关闭</button>

    </p>

    <input id="mytext" maxlength="230" type="text" placeholder="说点儿什么吧，这里没人认识你···">

    <button id="put">发布树洞</button>

</div>

js 代码

var div = document.getElementById("big_div");

var will_put = document.getElementById("will_put");

var put_text = document.getElementById("put");

var mytext = document.getElementById("mytext");

document.getElementById("btn_close").onclick = function () {

    div.style.display = "none";

};

will_put.onclick = function () {

    div.style.display = "block";

}

put_text.onclick = function () {

    function put_data() {

        var xhr = new XMLHttpRequest();

        xhr.open('GET', '/put_shudong.html?txt=' + mytext.value, true);

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4 && xhr.status == 200) {

                change_data(xhr.responseText);

            }

        };

        xhr.send();

    };

    put_data();

    mytext.value=""

    div.style.display = "none";

}

巴特西

AJAX 与 Python 后台通信

Ajax 简介

与python后台案例

最新文章

热门文章