按钮点击功能，易于初始化

Button click function for easy initialization

本文关键字：易于 初始化 功能 按钮      更新时间：2023-09-26

我正在尝试这样做，以便我可以轻松地初始化JQuery Ajax按钮。

这工作正常：

$(document).ready(function(){
$("#home").click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "/",
        success: function(data) {
            alert(data);
            $("#content").html(data);
        },
        error: function(response) {
            alert("ERROR:" + response.responseText);
        }
    });
});
});

我正在尝试通过将其变成函数来简化上述过程，并尝试了以下代码。但它不起作用。

$(document).ready(function(){
    LoadContent("#home", "/");
    LoadContent("#login", "/account/signin");
    LoadContent("#signup", "/account/create");
    LoadContent("#forgot", "/account/forgot-password");
});

function LoadContent(buttonID, url) {
    $(buttonID).click(function(e){
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: url,
            success: function(data) {
                alert(data);
                $("#content").html(data);
            },
            error: function(response) {
                alert("ERROR:" + response.responseText);
            }
        });
    });
}

我认为它必须与 .click（function（e）{}） 的设置方式有关。但是我对JQuery不是很熟悉。

这是我的建议。

  • 给所有按钮一个通用类，比如.ajax-button
  • 为每个按钮指定一个data-url属性，并让它等于目标ajax URL
  • 将代码简化为以下内容

JavaScript： 

$(document).ready(function(){
    $('.ajax-button').on('click', LoadContent);
});

function LoadContent(e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: $(this).data('url'),
        success: function(data) {
            alert(data);
            $("#content").html(data);
        },
        error: function(response) {
           alert("ERROR:" + response.responseText);
        }
    });
}

示例 HTML：

<button class="ajax-button" data-url="/account/create">Sign Up</button>

我会为每个元素提供一个单击事件侦听器，然后是一个用于 AJAX 调用的函数：

$(document).ready(function() {
    $("#home").click(function() {
        callAjax("/");
    });
    $("#login").click(function() {
        callAjax("/account/signin");
    });

    function callAjax(url) {
        $.ajax({
            type: "GET",
            url: url,
            success: function(data) {
                $("#content").html(data);
            },
            error: function(response) {
                alert("ERROR:" + response.responseText);
            }
        });
    }
});
相关文章：