Home >Web Front-end >JS Tutorial >Realize browser jump and pass parameters through jQuery encoding conversion, event response, and page jump

Realize browser jump and pass parameters through jQuery encoding conversion, event response, and page jump

php中世界最好的语言Original: 2018-05-03 10:15:491623browse

This time we will bring you how to implement browser jump and pass parameters through jQuery encoding conversion, event response, and page jump. Through jQuery encoding conversion, event response, and page What are the precautions when implementing browser jump and passing parameters? The following is a practical case, let’s take a look.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.slim.js"></script>
</head>
<body>
<input type="text" class="keyword"/>
<button id="searchBtn">点击</button>
<script type="text/javascript">
  $("#searchBtn").click(function() {
    var searchText = jQuery.trim($(".keyword").val());
    var searchUrl = encodeURI("two.html?searchText=" + searchText); //使用encodeURI编码
    location.href = searchUrl;
  })
</script>
</body>
</html>

two.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.slim.js"></script>
</head>
<body>
<input type="text" class="keyword1"/>
<script type="text/javascript">
  //获取 上一个搜索页面传来的参数 
  var searchUrl = window.location.href;
  var searchData = searchUrl.split("="); //截取 url中的“=”,获得“=”后面的参数
  var searchText = decodeURI(searchData[1]); //decodeURI解码
  $(".keyword1").val(searchText);
</script>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Realize browser jump and pass parameters through jQuery encoding conversion, event response, and page jump

Related articles