按下确定按钮后,表格重置

时间:2019-07-28 04:51:02

标签: javascript jquery html

我试图编写一个简单的页面,在其中按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。但是在第二次调用之前再次变为零并获得相同的数据。

0 个答案:

没有答案