代码之家  ›  专栏  ›  技术社区  ›  meleyal

如何使用jquery的ajax方法在click事件/链接上传递数据?

  •  0
  • meleyal  · 技术社区  · 15 年前

    使用“老派”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;]

    2 回复  |  直到 15 年前
        1
  •  2
  •   Parrots    15 年前

    通常,对于类似的情况,我只使用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可防止浏览器在单击链接时实际转到该链接。

        2
  •  1
  •   bobince    15 年前

    Parrots的答案最适合这种特定情况:如果您使用的是链接,那么href应该指向对非javascript用户和使用鼠标中键或右键单击书签等方式打开链接的人有用的地方。

    如果你没有链接的目的地,你就不应该真的使用链接。你可以使用 span 与此类似(如果您想让它正确响应键盘,这需要一些tabindex和脚本帮助),或者,通常最好(如果您不介意在IE中增加填充和移动的像素),一个重新设计的按钮。

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

    或者,可以开始在类名中放置多个参数( class="foo-28 bar-16a" )并使用JS函数进行拆分,匹配命名前缀并返回其余部分。类名称中允许使用大多数字符,但当然不能使用其他空间。(您也可以用类名的某种方式对其进行编码,例如URL编码。)

    或者,您可以在元素中放置注释,并使用DOM方法获取注释对象并提取其数据。您可以将javascript/json放入其中,例如:

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

    或者,您可以使用HTML5 data- 属性。或(…其他几个选项…)