如何以更高效和有用的方式在jQuery中创建多个ajax调用

Question

我的代码中有这三个链接:

<ul>
<li><a id="link1" href="#">link 1</a></li>
<li><a id="link2" href="#">link 2</a></li>
<li><a id="link3" href="#">link 3</a></li>
</ul>

这就是我为每个链接编写ajax请求的方法(因为你可以看到每个链接的相同代码多次3次 - 我想知道如何避免这种情况)

$(document).ready(function () {
    $("a#link1").click(function() {
        $.get("anothertest.php?q=1", function(data){
            $("#phpTestAlon").html(data);
        });
    });
    $("a#link2").click(function() {
        $.get("anothertest.php?q=2", function(data){
            $("#phpTestAlon").html(data);
        });
    });
    });
    $("a#link3").click(function() {
        $.get("anothertest.php?q=3", function(data){
            $("#phpTestAlon").html(data);
        });
    });
});

创建此代码但没有多次重复以使其更高效的方法是什么？有没有办法像这样写？:

$ .get(" anothertest.php？q ="+ theIDofTheElement,function(data){

谢谢,Alon

Answer 1

data-id在链接中添加一个属性并使用一个JS:

<ul>
    <li><a id="link1" href="#" data-id="1">link 1</a></li>
    <li><a id="link2" href="#" data-id="2">link 2</a></li>
    <li><a id="link3" href="#" data-id="3">link 3</a></li>
</ul>

$("ul li a").click(function() {
    var idToSend = $(this).data('id');

    $.get("anothertest.php?q=" + idToSend, function(data){
        $("#phpTestAlon").html(data);
    });
});

此示例使用data-id,但您可以使用您想要的任何属性,包括id="".另一个明智的选择是rel="".

请注意,选择器已更改ul li a为捕获<a>一个事件中的所有单击.