单击链接时传递参数而不使用?id = xxx

时间:2017-09-01 02:59:17

标签: javascript php html5

有没有办法通过点击链接来传递参数,在链接不处理参数的情况下例如

<a href='example.php?id=1'>M</a>

我不想使用?id=1

有没有办法做到这一点?我希望在单击链接时将参数传递给下一页,而不使用表单和链接参数。

所以我可以在下一页上处理参数,而不是在同一页面上。

3 个答案:

答案 0 :(得分:2)

最简单 - 你可以创建一个带有隐藏输入的表单,然后点击该链接发送它。这是代码(使用jQuery):

$('.submit-form').click(function(){
  //add the value to be sent to the input in the form
  $('#link-extra-info input').val( $(this).data('submit') );
  
  //the href in the link becomes the action of the form
  $('#link-extra-info').attr('action', $(this).attr('href'));
  
  //submit the form
  $('#link-extra-info').submit();
  
  //return false to cancel the normal action for the click event
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="link-extra-info">
  <input type="hidden" name="p" value="0">
</form>

<a href="page.html" class="submit-form" data-submit="1">Link text 1</a>
<a href="page2.html" class="submit-form" data-submit="2">Link text 2</a>

答案 1 :(得分:1)

示例1

您可以使用data-*参数和Ajax。

<a class="example_anchor" href='example.php?' data-id="1" >M</a>

<script>

$(".example_anchor").on("click", function (e) {
e.preventDefault();
var id = $(this).data('id');

$.ajax({
    url: your_url,
    type: "POST",
    dataType: "json",
    data: { id: id },
    error: function (msg) {
        // Error handling
    },
    success: function (msg) {
        // Success handling
        if (msg == true) {
             alert("You will now be redirected.");
             window.location = "//your_redirect_link/";
        }
    }
});


});

</script> 

示例2

您可以使用onclick标记<a>传递参数

中的函数
<a href='#' onclick="yourfunction(1)">M</a>

<script>
    function yourfunction(id1)
    {
        alert(id1);
    }
</script>

JS Fiddle Example

答案 2 :(得分:1)

潜在的创意解决方案:使用Cookie。 HTML将是:

<a href="link.html" onclick="passVariable(this)">Link</a>

使用一些JS

<script>
function passVariable(url) {
    document.cookie = "id=1";
    window.location.href = this;
}
</script>

然后在您导航到的页面上,使用一些JS来检索cookie:

<script>
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
</script>

解析cookie值后,可以进行AJAX调用以获取关联数据。