如何进行 3xx 重定向并将表中的参数作为查询参数(在 URL 中)传递?

问题描述 投票:0回答:5

如何重定向到另一个页面并从表中传递 url 中的参数? 我在龙卷风模板中创建了类似这样的东西

<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'] 放入。 如何做到这一点?

javascript jquery templates jquery-mobile tornado
5个回答
58
投票

将用户名设置为按钮的

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

如果值不是:

,则评估为 true
  • 未定义
  • NaN
  • 空字符串(“”)
  • 0

上面的列表代表了 ECMA/Javascript 中所有可能的假值。


8
投票

这样做:





7
投票

绑定按钮,这是用 jQuery 完成的:

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

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>

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();
});
© www.soinside.com 2019 - 2024. All rights reserved.