<html>
<head>
<title>RollBack Resume UI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function noBack(){window.history.forward()}
noBack();
window.onload=noBack;
window.onpageshow=function(evt){if(evt.persisted)noBack()}
window.onunload=function(){void(0)}
</script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{{base_url}}/admin/">Airflow</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="{{base_url}}/admin/">DAGs</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data Profiling <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{base_url}}/admin/queryview/">Ad Hoc query</a></li>
<li><a href="{{base_url}}/admin/chart/">Charts</a></li>
<li><a href="{{base_url}}/admin/knownevent/">Known Events</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{base_url}}/admin/slamiss/">SLA Instances</a></li>
<li><a href="{{base_url}}/admin/taskinstance/">Task Instances</a></li>
<li><a href="{{base_url}}/admin/log/">Logs</a></li>
<li><a href="{{base_url}}/admin/basejob/">Jobs</a></li>
<li><a href="{{base_url}}/admin/dagrun/">DAG Runs</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{base_url}}/admin/pool/">Pools</a></li>
<li><a href="{{base_url}}/admin/configurationview/">Configuration</a></li>
<li><a href="{{base_url}}/admin/user/">Users</a></li>
<li><a href="{{base_url}}/admin/connection/">Connections</a></li>
<li><a href="{{base_url}}/admin/variable/">Variables</a></li>
<li><a href="{{base_url}}/admin/xcom/">XComs</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Rollback <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{base_url}}/admin/rollback/">Rollback </a></li>
<li><a href="{{base_url}}/admin/rollbackresume/">Resume</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Docs <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Documentation</a></li>
<li><a href="#">Github</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{base_url}}/admin/versionview/">Version</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<h3>RollBack Resume UI</h3>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col" >Dataset Id</th>
<th scope="col">Dataset State</th>
</tr>
</thead>
<tbody>
{% for i in qry%}
<tr>
<th scope="row"> </th>
<td> {{ i.dataset_id }} </td>
<td> {{ i.dataset_state }} </td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<head>
<div class="container">
<button type="button" class="btn btn-primary" onclick="loadDoc()"> Resume operation </button>
</div>>
<p id="demo"></p>
<script>
function loadDoc(dataset_id) {
var xhttp = new XMLHttpRequest();
document.getElementById("myBtn").disabled = true;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "http://127.0.0.1:8000", true);
xhttp.setRequestHeader('Accept','text/html')
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.setRequestHeader("Content-Length","22");
xhttp.send(JSON.stringify({'operation' : 'inactive'}));
}
</script>
</head>
</html>
说明：
我有HTML页面，显示来自数据库的一些数据。我还有一个按钮，单击后会发送HTTP发布请求，因此单击按钮后不久，我正在禁用该按钮，即使刷新浏览器后，我也希望被禁用。我不知道该怎么办，在这种情况下有人可以帮我吗？
答案 0 :(得分：0)
您可以在请求后设置会话变量，并检查是否已将变量设置为“禁用”按钮，或者是否要使用javascript使用cookie处理它。
答案 1 :(得分：0)
您可以使用LocalStorage API来实现。
当您的用户提交表单时，您将状态持久化到LocalStorage，该状态控制“提交按钮已禁用”属性。在页面加载时，您将向LocalStorage查询此状态，并相应地初始化Disabled属性：
// Query storage state and set disabled attribute if local storage has
// myBtnDisabled key value of "true"
if(window.localStorage && localStorage.getItem("myBtnDisabled") === "true") {
document.getElementById("myBtn").disabled = true;
}
function loadDoc(dataset_id) {
var xhttp = new XMLHttpRequest();
document.getElementById("myBtn").disabled = true;
// Set state to cause the button to be disabled in future refreshes
if(window.localStorage) {
localStorage.setItem("myBtnDisabled", "true");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "http://127.0.0.1:8000", true);
xhttp.setRequestHeader('Accept', 'text/html')
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.setRequestHeader("Content-Length", "22");
xhttp.send(JSON.stringify({
'operation': 'inactive'
}));
}
答案 2 :(得分：0)
您可以使用session或localStorage并检查函数中的条件，并在页面加载或准备就绪时调用该函数，例如：
$(document).ready(function(){
$(function(){
if(localStorage.getItem('your_variable)){
$('#mybtn').prop('disabled', false);
}else{
$('#mybtn').prop('disabled', true);
}
})
});
希望这会有所帮助。