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"one_answers" 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>

之后在您的Ajax上。

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

Answer 2

edit 使用数据属性说一个名为data-url的属性，在单击事件中获取它

为所有按钮提供相同的类名称。检索按钮的值，然后将它们传递到Ajax调用，

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

Answer 3

您可以使用data-*前缀自定义属性存储 file 以访问$.ajax()函数。您可以使用普通类附加事件处理程序。

html

<button class="button" filename="button1.txt"></button>
<button class="button" filename="button2.txt"></button>
<button class="button" filename="button3.txt"></button>

可以使用Element.dataset属性或JQuery的.data()方法获取文件名。

脚本

$(".button").click(function(){
    var fileName = this.dataset.filename;
    $.ajax({
        url: fileName, 
        /*more code*/
    });
});

Answer 4

我想一个通用的类名称就足够了。尽管您需要在按钮上有一些ID才能有所不同，但这并不需要。在这种情况下可以使用this。

我认为可以将您的Ajax放在参数化功能中：

function myAjaxCall(){
    var url = this.textContent.trim().toLowerCase()+'.txt';
    $.ajax({
        url: url, 
        /*more code*/
    });
}
$(document).ready(function(){
    $(".button").click(myAjaxCall);
});

考虑这样的按钮：

<button class='button'>Button1</button>
<button class='button'>Button2</button>
<button class='button'>Button3</button>

Answer 5

只需在单击事件中添加按钮

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

2：

添加html中的单击onclik事件

Answer 6

尝试此

$(document).ready(function(){
    $(".button1, .button2 , .button3").click(function(){
        var value = $(this).attr("value");
        $.ajax({
            url: value, 
            /*main logic*/
        });
    });
});