如何在另一個頁面上重定向並從表中傳遞 url 中的參數？

Question

如何在另一個頁面上重定向並從表中傳遞 url 中的參數？ 我在 tornato 模板中創建了這樣的東西

<table data-role="table" id="my-table" data-mode="reflow">
    <thead>
        <tr>
            <th>Username</th>
            <th>Nation</th>
            <th>Rank</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for result  in players %}
        <tr>
            <td>{{result['username']}}</td>
            <td>{{result['nation']}}</td>
            <td>{{result['rank']}}</td>
            <td><input type="button" name="theButton" value="Detail"
                       ></td>
        </tr>
    </tbody>
    {% end %}
</table>

我希望當我按下詳細信息時重定向到/player_detail?username=username並顯示有關該播放器的所有詳細信息。 我試過href="javascript:window.location.replace('./player_info');" 在 input 標簽內，但不知道如何將 result['username'] 放入。如何做到這一點？

Answer 1

將用戶名作為data-username屬性設置為按鈕以及類：

HTML

<input type="button" name="theButton" value="Detail" class="btn" data-username="{{result['username']}}" />

JS

$(document).on('click', '.btn', function() {

    var name = $(this).data('username');        
    if (name != undefined && name != null) {
        window.location = '/player_detail?username=' + name;
    }
});

編輯：

此外，您可以使用以下命令檢查undefined && null ：

$(document).on('click', '.btn', function() {

    var name = $(this).data('username');        
    if (name) {
        window.location = '/player_detail?username=' + name;
    }
});

正如在這個答案中提到的那樣

if (name) {            
}

如果值不是，則評估為真：

空值
未定義
為NaN
空字符串（“”）
0
假

以上列表表示ECMA / Javascript中所有可能的錯誤值。

Answer 2

做這個：

<script type="text/javascript">
function showDetails(username)
{
   window.location = '/player_detail?username='+username;
}
</script>

<input type="button" name="theButton" value="Detail" onclick="showDetails('username');">

Answer 3

綁定按鈕，這是通過jQuery完成的：

$("#my-table input[type='button']").click(function(){
    var parameter = $(this).val();
    window.location = "http://yoursite.com/page?variable=" + parameter;
});

Answer 4

這是一個不依賴於JQuery的通用解決方案。 只需修改window.location的定義即可。

<html>
   <head>
      <script>
         function loadNewDoc(){ 
            var loc = window.location;
            window.location = loc.hostname + loc.port + loc.pathname + loc.search; 
         };
      </script>
   </head>
   <body onLoad="loadNewDoc()">
   </body>  
</html>

Answer 5

HTML - 設置一個 id 屬性

<input type="button" id="go-another-page" name="theButton" value="Detail">Go to another page with parameters</td>

JS - 創建一個用於重定向的動作監聽器

  const anotherPackage = document.getElementById('go-another-page');

   anotherPackage.addEventListener('click', (event) => {
    event.preventDefault();
   // After ? mark set your key and variable eg: payment=order-consulting
   // For multiple parameters you can use & eg: payment=order-consulting&amount=20
    window.location.replace('/payment.html?payment=order-consulting');
  });

從另一個頁面檢索參數（在本例中為 payment.html）

// payment.js - this is javascript of your another page
document.addEventListener('DOMContentLoaded', (event) => {
  const parameters = new URLSearchParams(window.location.search);
  const payment = parameters.get('payment');
  console.log(payment);
  event.preventDefault();
});

如何在另一個頁面上重定向並從表中傳遞 url 中的參數？

問題描述

5 個解決方案

解決方案1
36 已采納 2012-12-31 11:41:12

解決方案2
7 2012-12-31 10:52:47

解決方案3
6 2012-12-31 10:50:43

解決方案4
2 2016-08-10 13:22:37

解決方案5
0 2022-04-11 10:36:59

如何在另一個頁面上重定向並從表中傳遞 url 中的參數？

問題描述

5 個解決方案

解決方案1 36 已采納 2012-12-31 11:41:12

解決方案2 7 2012-12-31 10:52:47

解決方案3 6 2012-12-31 10:50:43

解決方案4 2 2016-08-10 13:22:37

解決方案5 0 2022-04-11 10:36:59

解決方案1
36 已采納 2012-12-31 11:41:12

解決方案2
7 2012-12-31 10:52:47

解決方案3
6 2012-12-31 10:50:43

解決方案4
2 2016-08-10 13:22:37

解決方案5
0 2022-04-11 10:36:59