点击一个锚点后，如何更改它的href属性？

Question

我有一个通过 AJAX 获取数据的页面。除此之外，我还有一个链接可以下载 CSV 文件。

我的问题是，当我需要传递一些参数来触发点击事件时，服务器才能返回正确的 CSV 文件。

如果没有任何处理，链接看起来像这样：

<a href="/manager/TargetResults.csv" class="black">Download Target Reports</a>

这将触发一个ASP.NET MVC控制器操作，返回CSV文件。不过，我想在查询字符串中传递两个参数。最初，我认为可以拦截点击事件并向查询字符串添加数据，如下所示:

var holder = $('.hidden-information').first();                                   
var newOutlets = $('input[name="newoutlets"]', holder).val();                                   
var queryDate = $('input[name="enddate"]', holder).val();                                    
var anchor = $(this);                                    
var link = anchor.attr('href');                                   
link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
anchor.attr('href', link);

看起来在这个阶段更改href不会及时更新链接，当它到达服务器时URL仍将保持原样？

点击后是否可以更改URL，还是我需要寻找另一种方法？

谢谢

- Sergio

---

能否提供一些反馈，让我今后的问题更好，给我点踩的人可以吗？ - Sergio

Answer 1

您可以自己重定向窗口，像这样：

您可以自己重定向窗口，像这样：

var holder = $('.hidden-information').first();                                   
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
window.location.href = this.href + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
return false; //prevent default going-to-href behavior

或者，无论是什么更新了那些隐藏字段，都要在链接被点击之前更新它，例如：

$("#someField").change(function() {
  var holder = $('.hidden-information').first();                                   
  var newOutlets = $('input[name="newoutlets"]', holder).val();
  var queryDate = $('input[name="enddate"]', holder).val();                              
  $("a.black").attr("href", function() {
    return "/manager/TargetResults.csv" + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
  });
});

主要区别在于这种方法仍然允许正常的点击行为，如ctrl+单击等。

- Nick Craver

Answer 2

为了让您的选择更加丰富，您可以在链接中嵌入一个 span 标签：

<a href="/manager/TargetResults.csv" class="black"><span>Download Target Reports</span></a>

然后挂钩click事件到span上，这将在链接的click之前发生。

- T.J. Crowder

Answer 3

您可以在此处实现JavaScript重定向：

    var holder = $('.hidden-information').first();                                   
    var newOutlets = $('input[name="newoutlets"]', holder).val();                                   
    var queryDate = $('input[name="enddate"]', holder).val();                                    
    var anchor = $(this);                                    
    var link = anchor.attr('href');                                   
    link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
    anchor.attr('href', link);
   location.href=link;

是的，有人可以禁用 js，但你的代码完全基于 js。

谢谢。

- Shakti Singh

Answer 4

如果没有 href，点击将重新加载当前页面，因此您需要像这样的内容：

<a href="#" onclick="f1()">jhhghj</a>

或者像这样防止滚动：

<a href="#" onclick="f1(); return false;">jhhghj</a>

在你的f1函数中返回false并且：

<a href="#" onclick="return f1();">jhhghj</a>

......或者，不显眼的方式：

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
  document.getElementById("myLink").onclick = function() {
    document.getElementById("abc").href="xyz.php"; `enter code here`
    return false;
  };
</script>

- Amar Srivastava