AJAX 与 Python 后台通信-CFANZ编程社区

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";
}