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


现在有这样一个段代码:


 <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- ,但感觉略笨,请问有没有更好的方法?

前端 Ajax JavaScript 前端开发

不是草泥马 9 years, 7 months ago

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

凉风吹过de夜 answered 9 years, 7 months ago

这个问题的核心在于 同样的 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);
    });
});

姐控團D社長 answered 9 years, 7 months ago

Your Answer