js阻止页面刷新
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js阻止页面刷新相关的知识,希望对你有一定的参考价值。
参考技术A 网页中用户的表单填写到一半,或者ajax请求发送期间,如果用户刷新浏览器可能会导致数据保存失败。需要阻止页面刷新,这时可以通过监听页面window.onbeforeunload事件函数来处理。window.onbeforeunload = function(e)
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
;
不过chrome不支持自定义显示文字,固定为
“要重新加载该网站吗?
系统可能不会保存您所做的修改”
而firefox和safari就会正常使用return value里面的文字
参考:
-- https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility
Django阻止页面刷新
【中文标题】Django阻止页面刷新【英文标题】:Django Prevent page from refreshing 【发布时间】:2019-10-06 19:02:15 【问题描述】:所以伙计们,我有两个问题。 我是 Django 和 Python 的新手。我用表单构建了一个页面,我可以在这些字段中输入数据,我收到数据并对其进行一些操作,并在单击按钮后传回显示在表单字段下的 div 中的其他变量。它实际上正在工作,但页面会刷新,所以我只能看到一秒钟的结果。第二个问题是我必须在按钮上单击两次才能显示正确的结果。示例:第一个按钮单击结果显示 x,然后我使用其他输入并单击按钮,结果再次显示 x。再次单击按钮后,它显示正确的结果,我该如何解决这个问题。
您对如何改进这个系统有什么建议吗?
我已经非常感谢您的帮助。
我的视图文件:
from django.shortcuts import render,redirect
from django.http import HttpResponse
from pages.forms import NameForm
import requests
# Create your views here.
def home_view(request,*args,**kwargs):
api_key = "RGAPI-9b573263-7b5a-433e-9e82-a973f5db4749"
name = ""
tier = ""
rank = ""
lp = 0
if request.method == 'POST':
form = NameForm(request.POST)
if form.is_valid():
summoner = form.cleaned_data["summoner"]
region = form.cleaned_data["region"]
url = "https://" + region + ".api.riotgames.com/lol/summoner/v4/summoners/" \
"by-name/" + summoner + "?api_key=" + api_key
response = requests.get(url).json()
id = response["id"]
name,tier,rank,lp = ranklookup(id,region,api_key)
return render(request,"home.html",'form' : form,'rank':rank, 'tier' : tier, 'lp' : lp, 'name' : name)
def ranklookup(id,region,api_key):
rankurl = "https://" + region + ".api.riotgames.com/lol/league/v4/entries/by-summoner/" + id + "" \
"?api_key=" + api_key
rankResponse = requests.get(rankurl).json()
if rankResponse[0]["queueType"] == "RANKED_SOLO_5x5":
name = rankResponse[0]["summonerName"]
tier = rankResponse[0]["tier"]
rank = rankResponse[0]["rank"]
lp = str(rankResponse[0]["leaguePoints"])
else:
name = rankResponse[0]["summonerName"]
tier = rankResponse[1]["tier"]
rank = rankResponse[1]["rank"]
lp = str(rankResponse[1]["leaguePoints"])
return name,tier,rank,lp
还有我的 HTML 文件:
% extends 'base.html' %
% block content %
<h2> League of Legends Rank lookup</h2> <br>
<div id ="ranklookup">
<form id="myform" method="post"> % csrf_token %
form
</form>
<button onclick="showDiv()" type="submit" id="but" form="myform" value="button">Submit</button><br><br>
<div id="showRank">
This will get replaced
</div>
<script type="text/javascript">
function showDiv()
var tier = ' tier ';
var rank = ' rank ';
var name = ' name ';
var lp = lp;
document.getElementById("showRank").innerHTML = "Name: " + name + "</br> Rank: " + tier + rank + "</br> LP: " + lp;
</script>
% endblock %"
【问题讨论】:
您想研究 AJAX。如果数据需要按需传递给模板,那么您将需要一个视图函数,但您需要停止表单的默认行为,同时触发页面刷新 是的,我发现我需要研究 AJAX 才能做到这一点,但你能说我该如何解决我的第二个问题吗? 【参考方案1】:如果您不打算完全重新加载页面,您应该寻找如何在 django 中处理 AJAX 表单(即在 this previous answer 中)。
否则,您可以更改您的views.py
代码如下:
def home_view(request,*args,**kwargs):
api_key = "RGAPI-9b573263-7b5a-433e-9e82-a973f5db4749"
name = ""
tier = ""
rank = ""
lp = 0
if request.method == 'GET':
form = NameForm(auto_id='myform')
return render(request,"home.html",'form' : form, 'showdiv': False)
if request.method == 'POST':
form = NameForm(request.POST)
if form.is_valid():
summoner = form.cleaned_data["summoner"]
region = form.cleaned_data["region"]
url = "https://.api.riotgames.com/lol/summoner/v4/summoners/by-name/?api_key=".format(region, summoner, api_key)
response = requests.get(url).json()
id = response["id"]
name, tier, rank, lp = ranklookup(id, region, api_key)
return render(request, "home.html",
'form': form,
'rank': rank,
'tier': tier,
'lp': lp,
'name' : name,
'showdiv': True )
和模板(现在根本不使用 javascript):
% extends 'base.html' %
% block content %
<h2> League of Legends Rank lookup</h2> <br>
<div id ="ranklookup">
<form id=" form.auto_id " method="post">
% csrf_token %
form
</form>
<button type="submit" id="but" form=" form.auto_id " value="button">
Submit</button><br><br>
% if showdiv %
<div id="showRank">
Name: name <br>
Rank: tier rank <br>
LP: lp ;
</div>
% endif %
% endblock %
【讨论】:
想尝试一下,但是 id = response["id"] 行出现了关键错误 好的,它开始工作了,url 变量与你制作它的方式不正确,使用我的线路并且它有效。这是完美的,这解决了我所有的问题,谢谢先生。你真的有什么建议可以让这个系统变得更好吗? 哎呀..我忘记了一些
..现在它应该可以工作了。我建议您在使用 django 时始终将django documentation 作为您的第一个起点。以上是关于js阻止页面刷新的主要内容,如果未能解决你的问题,请参考以下文章