问题描述
当用户点击按钮发起对后端API的请求,如果前端直接使用返回的内容字符串更新页面,会导致页面刷新,页面上本来展现的内容会立即消失,给用户一种页面内容"闪现"的感觉,而内容实际上是有返回的,只是页面刷新的结果无法展现而已。
解决方法
要解决这个问题,我们需要采用异步请求与响应,而不刷新页面。这可以通过AJAX技术实现。### 1. fetch API发起异步请求
我们使用fetch API调用后端API,由于使用Promise,这个请求变成异步的。
要解决这个问题,我们需要采用异步请求与响应,而不刷新页面。这可以通过AJAX技术实现。### 1. fetch API发起异步请求
我们使用fetch API调用后端API,由于使用Promise,这个请求变成异步的。
js
fetch('/generate')
.then(res => res.text())
.then(data => {
// ...
})
2. 直接使用返回数据更新页面
在Promise的then回调中,我们直接使用返回的数据更新页面内容,而不是返回一个内容字符串。
在Promise的then回调中,我们直接使用返回的数据更新页面内容,而不是返回一个内容字符串。
js
fetch('/generate')
.then(res => res.text())
.then(data => {
document.getElementById('output').innerText = data;
})
3. 使用事件绑定而不是表单提交
我们使用JavaScript事件绑定的方式来触发发送请求的函数,而不是使用<form>表单的提交事件。这也会使请求变为异步的。
我们使用JavaScript事件绑定的方式来触发发送请求的函数,而不是使用<form>表单的提交事件。这也会使请求变为异步的。
js
document.querySelector('button').addEventListener('click', generateAscii);
function generateAscii() {
// ...
}
4. 优化后端响应速度
我们还需要确保后端API响应足够快,前端能在页面刷新前拿到数据。这要求我们优化后端代码,减少不必要计算,并设置超时时间。
我们还需要确保后端API响应足够快,前端能在页面刷新前拿到数据。这要求我们优化后端代码,减少不必要计算,并设置超时时间。
python
@app.route('/generate')
def generate():
start = time.time()
# 优化后的代码逻辑
ascii_art = ...
end = time.time()
print(f'Processing time: {end - start}s')
return ascii_art
## 总结
通过以上几个步骤,我们让网页应用变成异步响应的,使用AJAX技术实现异步请求与响应,并在回调中直接更新页面,解决了页面内容"闪现"的问题,实现了更好的用户体验
通过以上几个步骤,我们让网页应用变成异步响应的,使用AJAX技术实现异步请求与响应,并在回调中直接更新页面,解决了页面内容"闪现"的问题,实现了更好的用户体验
注意：本文归作者所有，未经作者允许，不得转载
原文地址： http://blog.wsmee.com/post/161
版权声明：非商用-非衍生-保持署名| Creative Commons BY-NC-ND 3.0
