javascript - jQuery/ajax 按钮点击使用变量

Question

我想使用 jQuery/Ajax 实现一个简单的网页。我有 3 个按钮，每个按钮都将使用 ajax 调用从服务器获取不同的文件。唯一的区别是每个按钮有不同的类名，调用不同的文件。其他一切，例如加载时间、加载图标、成功/失败消息，都是一样的。因此，我只想编写 1 个 ajax 函数，而不是 3 个。

我有:

<script>
$(document).ready(function(){
    $(".button1").click(function(){
        $.ajax({
            url: "button1.txt", 
            /*more code*/
        });
    });
});
</script>

我想创建另一个函数，这样“button1”和“button1.txt”将成为一个变量，函数返回的任何内容都将在 ajax 函数中使用，这样我就可以重用 ajax 函数3次。你是如何做到这一点的？

Answer 1

您需要在所有三个按钮上设置 url，例如

<button class='button1' data-url='button1.txt'>button 1</button>
<button class='button2' data-url='button2.txt'>button 2</button>
<button class='button3' data-url='button3.txt'>button 3</button>

After That 在你的 ajax 上。

<script>
$(document).ready(function(){
$(".button1, .button2, .button3").click(function(){
var url = $(this).attr('data-url');
    $.ajax({
        url: url", 
        /*more code*/
    });
});
});