点击不同链接用ajax返回不同内容

Question

现在有这样一个段代码：

<ul>
    <li><a href="#">li1</a></li>
    <li><a href="#">li2</a></li>
    <li><a href="#">li3</a></li>
    <li><a href="#">li4</a></li>
    <li><a href="#">li5</a></li>
</ul>

我需要点击不同a然后通过ajax返回不同的内容，ajax 用 jquery，请问这段js代码如何写？主要问题是如何识别不同的a来发送不同的请求。我初步的想法是为每个a或者li加上不同的class或者添加html5中的data-，但感觉略笨，请问有没有更好的方法？

Answer 1

这个问题的核心在于同样的 A 标签，如何获取其唯一标识！

在不改变 A 标签的情况下：

1，获取 A 标签内容。

$('ul').on('click', 'a', function() {
    var value = $(this).text();
    $.post('url', { value: value }, function(response) {
        console.log(response);
    });
});

2，获取 A 标签 index。

$('ul').on('click', 'a', function() {
    var value = $(this).closest('li').index();
    $.post('url', { value: value }, function(response) {
        console.log(response);
    });
});

Answer 2

a点击时取父元素li的index位置，建立ajax不同请求参数的数组[]，参数在数组[]中的顺序和li在ul中的顺序一致。这个数组的参数是在JQ中写入还是获取html的data-*，就看你自己的需求了。建议获取html的data-*，这样数组[]的顺序始终和li的顺序一致。