Flask框架ajax实现前端页⾯局部刷新log:
记录⼯作中遇到的问题，并解决问题
描述：
在页⾯发起请求之后，返回的结果在当前页⾯某个div刷新展⽰，不刷新整个页⾯。
python3代码
# 账号加密
def encry_nick(self):
layui和bootstrap哪个好
data = json.loads(("data"))
print(data)
nick = data["nick"]
print(nick, "这是传的账号")
name = ct.nick(nick)
return jsonify({"success": 200, "mixNick":name})
# 账号解密
def decry_nick(self):
data = json.loads(("data"))
mixnick = data["mixnick"]
mixname = ct.username(mixnick)
return jsonify({"success": 200, "nick":mixname})
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账号⼿机号加解密</title>
<link rel="stylesheet" href="../../static/layui/css/layui.css">
<script src="../../static/layui/layui.all.js"></script>
<script src="../../static/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<ul class="breadcrumb">
<li>⼯具管理</li>
<li class="active">加解密</li>
</ul>
</div>
<div >
<form class="layui-form">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">会员账号</label>
<div class="layui-input-block">
<textarea placeholder="请输⼊内容" class="layui-textarea txt" name="nick">{{ nick }}</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-btn nicks" lay-submit lay-filter="*">加密</div>
<div class="layui-btn nicks" lay-submit lay-filter="*">加密</div>
<div class="layui-btn mixnick" lay-submit lay-filter="*">解密</div>
<button type="reset" class="layui-btn layui-btn-primary clearbtn">清空</button>    </div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">处理结果</label>
<div class="layui-input-block">
<textarea placeholder="" class="layui-textarea result"></textarea>
</div>
</div>
</form>
<script src="layui.js"></script>
</div>
<script type="text/javascript">
//搜索结果局部刷新
$(function(){
$('.nicks').click(function(){
var nick = $('.txt').val();
var data= {
data: JSON.stringify({
'nick': nick,
}),
}
$.ajax({
type: 'POST',
url: '/lp3/encryNick/',
data: data,  // 这个data是要post的数据
success: function(data){  // 这个data是接收到的响应的实体
$('.result').val(data["mixNick"]);
}
});
});
$('.mixnick').click(function(){
var nick = $('.txt').val();
var data= {
data: JSON.stringify({
'mixnick': nick,
}),
}
$.ajax({
type: 'POST',
url: '/lp3/decryNick/',
data: data,  // 这个data是要post的数据
success: function(data){  // 这个data是接收到的响应的实体
$('.result').val(data["nick"]);
}
});
});
});
//点击清空输⼊框
$('.clearbtn').on('click',function () {
$('.result').html('');
$('.txt').html('');
$('.txt').html('');    })
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。