如何从表格中重定向到另一个页面并通过URL传递参数？

Question

如何从表格中重定向到另一个页面并通过URL传递参数？

javascriptjquerytemplatesjquery-mobiletornado

38

如何从表格重定向到另一个页面并在URL中传递参数？我在Tornado模板中创建了以下内容

<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');"，但不知道如何将result['username']添加进去。请问应该怎么处理？

- PaolaJ.

5个回答

8

请执行以下操作：

<script type="text/javascript">
function showDetails(username)
{
   window.location = '/player_detail?username='+username;
}
</script>
<input type="button" name="theButton" value="详情" onclick="showDetails('用户名');">

注意：保留原有的HTML标签。

- Ravinder Singh

7

将按钮绑定，可以使用jQuery完成：

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

- Atticus

6

这里有一个不依赖于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>

- TennisVisuals

0

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();
});

- MD SHAYON

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- palaѕн · Accepted Answer

将用户名称设置为按钮的 data-username 属性，并添加一个类：

<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) {            
}

如果值不是以下值之一，则将计算为true：

null
undefined
NaN
空字符串("")
0
false

上面的列表表示在ECMA/Javascript中所有可能为假的值。