Javascript 事件侦听器上的AJAX:$（this）

我有两个文件，一个包含html和javascript代码，另一个包含文本。它只在第一个div上工作，因为我在javascript代码中指定了它。现在我只想在单击的元素上显示文本。我想使用$（this）属性，但如何使用

HTML代码

<div id="ajax">
    <div>
        <ul>
            <li>list 1</li>
        </ul>
        <a href="" class="link">show</a>
    </div>

    <div>
        <ul>
            <li>Another list</li>
            <li>Another list 2</li>
        </ul>
        <a href="" class="link">show</a>        
    </div>

</div>

<script type="text/javascript">

var btns = document.querySelectorAll('.link');
var username = "username";
var message = "This is my message";

for (var i = 0; i < btns.length; i++) {
    var btn = btns[i];
    btn.addEventListener('click', function(e){
        e.preventDefault();

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var li = document.createElement('li');
                    $('#ajax div ul')[0].append(li);
                    document.getElementsByTagName('ul')[0].lastChild.innerHTML = xmlhttp.responseText;
                }
            }

            xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
            xmlhttp.send();

    })
}

</script>

清单1


另一份名单
另一份名单2

var btns=document.querySelectorAll（'.link'）；
var username=“username”；
var message=“这是我的消息”；
对于（变量i=0；i{
var divContext=$（e.target）.parent（）；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
divContext.find（“li:last”）。在（“
”）之后；
divContext.find（“li:last”）.append（xmlhttp.responseText）；
}
}
open（'GET'，'insert.php？username='+username+'&msg='+message，true）；
xmlhttp.send（）；
});


清单1


另一份名单
另一份名单2

Hi@Marcel，你说的“我想使用$（this）属性”是什么意思？如果你使用jQuery，为什么不使用$.ajax、jQuery选择器和事件处理程序？太好了@Marcel，你能把我的答案说得正确吗？谢谢，结束了。第二种方法更有效。谢谢