Question

使用'old school'javascript，您可以将ID作为内联函数调用（onclick="my_function(28)"或类似函数）中的参数，并使用服务器端代码提供的ID。

使用'new school'javascript，函数调用是从元素中抽象出来的，那么如何传递ID？

我的猜测是：

<a id="28" class="do-something" href="#">Do something</a>

$('a.do-something).click(function(event){

  element_id = $(this).attr('id');

  $.get('something.php', { id: element_id });

  return false;

});

您使用/看过的会议或最佳做法是什么？

[更新：添加返回false; ]

Answer 1

通常对于这样的事情我只会使用HREF来存储jQuery处理程序应该使用的URL：

<a class="do-something" href="something.php?id=28">Do something</a>

$('a.do-something).click(function(event){
  $.get($(this).attr('href'));
  return false;
});

这样，ID仍然存在，因为你需要CSS。另外，如果你需要多个参数发送到php函数，你不必担心，它通常是URL的所有部分。

返回false会阻止浏览器在单击时实际转到链接。

Answer 2

Parrots的答案最适用于这种特定情况：如果您使用的是链接，则href应指向非JavaScript用户以及使用中键单击或右键单击书签打开链接的人有用的地方不管。

如果您没有链接的目的地，则不应该使用链接。你可以使用类似SO的span（虽然这需要一些tabindex和脚本帮助，如果你想让键盘响应正常），或者，通常最好（如果你不介意填充和移动的额外像素）在IE中），一个重新设定的按钮。

但是，在一般情况下，您有时需要包含不适合href等现有属性的其他数据。有时可以在id中，但是你对你使用的角色有点限制。例如，您的代码是无效的HTML，因为ID不能以数字开头。对于数字ID，您可以尝试id="foo-28"并从代码中提取数字。

或者，您可以开始在类名（class="foo-28 bar-16a"）中放置多个参数，并使用JS函数进行拆分，匹配命名前缀并返回其余参数。大多数字符都允许在类名中，但当然你不能使用另一个空格。（您也可以在className中以某种方式对其进行编码，例如URL-encode。）

或者，您可以在元素中放置注释，并使用DOM方法获取注释对象并提取其数据。您可以将JavaScript / JSON放在其中，例如：

<span class="do-something"><!-- {foo: 28, bar: '16a'} --> Something </a>

或者，您可以使用HTML5 data-属性。或者（......其他几个选项......）

如何使用jQuery的ajax方法在点击事件/链接上传递数据？

2 个答案: