我试图编写一个简单的页面,在其中按OK按钮,它将获取页面上查询参数的标题和文本。但是,加载后,似乎重置了查询参数并最终获得了相同的数据。
$(document).ready(function() {
// left / right arrows
$(document).keydown(function(e) {
if (e.keyCode == 39) {
$(".move:focus")
.next()
.focus();
}
if (e.keyCode == 37) {
$(".move:focus")
.prev()
.focus();
}
});
function okClick() {
var urlToUse = 'http://localhost:3000/test?qp=' + $("#myQueryParam").val();
return $.ajax({
url: urlToUse,
type: "GET",
});
}
okClick().done(function(result) {
console.log("Success", result);
$("#title").text(result.title);
$("#iText").text(result.text);
$("#myQueryParam").val(result.myQueryParam);
console.log('All done');
}).fail(function(err) {
console.log(err);
alert("Something went wrong");
});
$("#b1").one(okClick);
$("#b2").click(function(e) {
alert("bb");
// add to history
});
console.log("ready!");
}); // end document.ready
#myProj{
background-color: green;
width: 100%;
color: #333333;
height: 300px;
margin: 0 auto;
overflow: hidden;
padding: 10px 0;
align-items: center;
justify-content: space-around;
display: flex;
float: right;
}
:focus {
outline: 20px solid red;
}
button:focus {
background: pink;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<div id="myProj">
<div class="container">
<form id=myForm>
<div class="form-group">
<!-- type="hidden" -->
<span class="label label-default dd">myQueryParam</span>
<input id="myQueryParam" name="queryParam" value="0" />
<h1 id="title">Title</h1>
<div class="label label-info" id="iText">Text</div>
</div>
<button id="b1" type="submit" class="btn btn-primary move">
OK
</button>
<button id="b2" type="button" class="btn btn-dark move">
Cancel
</button>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
最初,myQueryParam为0,在首次调用后变为1。但是在第二次调用之前再次变为零并获得相同的数据。