Javascript 如何注册单击但仍具有正常ahref_Javascript_Jquery_Html_Ajax

Javascript 如何注册单击但仍具有正常ahref

javascript jquery html ajax

Javascript 如何注册单击但仍具有正常ahref,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,在网页上，我有几个指向项目的链接，例如： <a href = "/view-item.php?id=1">View item 1</a> <a href = "/view-item.php?id=2">View item 2</a> <a href = "/view-item.php?id=3">View item 3</a> 出于SEO原因，我希望有一个普通的ahref，但当有人点击链接时，我想在数据库中注册点击，这

在网页上，我有几个指向项目的链接，例如：

<a href = "/view-item.php?id=1">View item 1</a>
<a href = "/view-item.php?id=2">View item 2</a>
<a href = "/view-item.php?id=3">View item 3</a>

出于SEO原因，我希望有一个普通的ahref，但当有人点击链接时，我想在数据库中注册点击，这样我就可以看到一个项目被点击了多少次

我想通过Ajax调用可以在数据库中注册单击，但不确定。

我会这样做的

注册单击事件

使用

event.preventDefault（）防止其默认行为


保存href属性的值
发送一个ajax并完成这些工作
现在使用location.href=href重定向到href中指定的url


$（.aLinks”）。在（'click'，函数（事件）{
event.preventDefault（）；
var href=$（this）.href；
$.ajax（…）.success（函数（）{
//如果你想做什么就做什么
location.href=href；
})
});
这就是我应该怎么做的
注册单击事件
使用event.preventDefault（）防止其默认行为

保存href属性的值
发送一个ajax并完成这些工作
现在使用location.href=href重定向到href中指定的url


$（.aLinks”）。在（'click'，函数（事件）{
event.preventDefault（）；
var href=$（this）.href；
$.ajax（…）.success（函数（）{
//如果你想做什么就做什么
location.href=href；
})
});
我认为最直接的方法是：
注册单击a
元素上的事件处理程序

阻止单击事件的默认行为

将目标页存储在新变量中
然后在事件处理程序中添加内容，比如XHR
完成填充后，将window.location.href
属性设置为步骤3中保存的目标
以下是一些不使用jQuery的代码：

const manyA=[…document.queryselectoral（“a”）]；
manyA.forEach（a=>{
//注册单击事件
a、 addEventListener（“单击”，事件=>{
//防止默认行为
event.preventDefault（）；
//获取链接的目标
const destination=event.target.getAttribute（“href”）；
//做XHR的事情
const xhr=new XMLHttpRequest（）；
xhr.open（'GET'，'myservice/username？id=some unique id'）；
xhr.onload=（）=>{
如果（xhr.status==200）{
警报（'用户名为'+xhr.responseText'）；
///将用户重定向到目标页面
window.location.href=目的地；
}
否则{
警报（'请求失败。返回的状态为'+xhr.status'）；
}
};
xhr.send（）；
});
});
我认为最直接的方法是：
注册单击a
元素上的事件处理程序

阻止单击事件的默认行为

将目标页存储在新变量中
然后在事件处理程序中添加内容，比如XHR
完成填充后，将window.location.href
属性设置为步骤3中保存的目标
以下是一些不使用jQuery的代码：

const manyA=[…document.queryselectoral（“a”）]；
manyA.forEach（a=>{
//注册单击事件
a、 addEventListener（“单击”，事件=>{
//防止默认行为
event.preventDefault（）；
//获取链接的目标
const destination=event.target.getAttribute（“href”）；
//做XHR的事情
const xhr=new XMLHttpRequest（）；
xhr.open（'GET'，'myservice/username？id=some unique id'）；
xhr.onload=（）=>{
如果（xhr.status==200）{
警报（'用户名为'+xhr.responseText'）；
///将用户重定向到目标页面
window.location.href=目的地；
}
否则{
警报（'请求失败。返回的状态为'+xhr.status'）；
}
};
xhr.send（）；
});
});
您可以添加一个onclick
处理程序，并使用event.preventDefault.in此函数发出将数据保存到db的请求

功能测试（e）{
event.preventDefault（）；
console.log（e.target.href）；
返回true；
}
您可以添加一个onclick
处理程序，并使用event.preventDefault.in此函数发出将数据保存到db的请求

功能测试（e）{
event.preventDefault（）；
console.log（e.target.href）；
返回true；
}
您可以将id设置为a
标记，并向该标记添加一个事件侦听器，然后在后端调用服务以插入数据库
<a class="some-btn" id="btn-1" href = "/view-item.php">View item 1</a>
<a class="some-btn" id="btn-2" href = "/view-item.php">View item 2</a>
<a class="some-btn" id="btn-3" href = "/view-item.php">View item 3</a>

<script>
 $('.some-btn').on('click',function(){
var id = $(this).attr('id')
//... then send id to your service with ajax or axios

})
</script>


$（'.some btn'）。在（'click'，function（）上{
var id=$（this.attr（'id'））
//…然后使用ajax或axios将id发送到您的服务
})
您可以将id设置为a
标记，并向该标记添加一个事件侦听器，然后在后端调用服务以插入数据库
<a class="some-btn" id="btn-1" href = "/view-item.php">View item 1</a>
<a class="some-btn" id="btn-2" href = "/view-item.php">View item 2</a>
<a class="some-btn" id="btn-3" href = "/view-item.php">View item 3</a>

<script>
 $('.some-btn').on('click',function(){
var id = $(this).attr('id')
//... then send id to your service with ajax or axios

})
</script>


$（'.some btn'）。在（'click'，function（）上{
var id=$（this.attr（'id'））
//…然后使用ajax或axios将id发送到您的服务
})
标记可以被赋予href
属性或onclick
属性，或两者兼有。onclick
属性可以指向别处定义的JavaScript函数：
<body>
  <script type="text/javascript">
  function logClick() {
    console.log("Clicked!");
  }
  </script>
  <a onclick="logClick()">Click Here!</a>
</body>

JavaScript:
function logClick() {
  console.log("Clicked!");
}

const aTag = document.getElementById("link");
aTag.addEventListener("click", logClick);

因此，在JavaScript函数中创建POST请求，并以某种方式将该函数传递给HTML
元素的单击事件。
标记可以被赋予href
属性或onclick
属性，或两者兼而有之。onclick
属性可以指向别处定义的JavaScript函数：
<body>
  <script type="text/javascript">
  function logClick() {
    console.log("Clicked!");
  }
  </script>
  <a onclick="logClick()">Click Here!</a>
</body>

JavaScript:
function logClick() {
  console.log("Clicked!");
}

const aTag = document.getElementById("link");
aTag.addEventListener("click", logClick);

因此，在JavaScript函数中创建POST请求，并以某种方式将该函数传递给HTML
元素的单击事件。
谢谢