html - 除了 <button> 之外，还有哪些 <tag> 可以用来触发 AJAX？

Question

我在下面有一个菜单:

<ul class="r1">
  <li class="lb"><button class="bu" value="orange">Orange</button></li>
  <li class="lb"><button class="bu" value="apple">Apple</button></li>
</ul>

我添加了 EventListener 脚本而不是链接:

<script>
var bs = document.getElementsByClassName("bu");
for(var i =0; i< bs.length; i++){
bs[i].addEventListener('click', function(){ sFunction(this.value);});
}
</script>

点击后会调用下面的ajax函数:

function sFunction(value) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","some.php?q="+value,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {document.getElementById("ajax").innerHTML = xmlhttp.responseText;}}}

这段代码运行良好。我相信这是因为“按钮”支持“li”不支持的 VALUE 属性。

现在，如果我不想使用“按钮”，是否可以使用任何其他标签/元素来替换“按钮”？

我的逻辑是我不想在我的菜单中使用按钮触发 ajax，因为该按钮将出现在列表菜单中。

有什么建议吗？

Answer 1

它可以是任何元素，如 div、span 等，但您唯一需要注意的是您的值将保存在哪里。

如果它是 button，你可以在 value 标签中使用它，例如，如果你使用 div，我们可以在自定义标签中使用它，例如这个，，

var bs = document.getElementsByClassName("bu");
for (var i = 0; i < bs.length; i++) {
  bs[i].addEventListener('click', function() {
    sFunction(this.getAttribute('data-value'));
  });
}

<div class="bu" data-value="42">Value</div>

所以请注意，不是将 this.value 传递给您的 ajax 函数，我们只是将其更改为

sFunction( this.getAttribute('data-value') );

希望对你有帮助