正文

AJAX 与 Python 后台通信

IP云V管理员/2022-08-31/4 阅读

08/31

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

相关阅读

目录[+]