Question

我试图做到这一点，以便我可以轻松初始化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不是很熟悉。

Answer 1

以下是我的建议。

为所有按钮提供一个公共类，比如.ajax-button
为每个按钮指定data-url属性，并使其等于目标ajax网址
将您的代码简化为以下

<强> 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>

Answer 2

我为每个元素都有一个click事件监听器，然后是一个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);
            }
        });
    }
});

按钮单击功能，便于初始化

2 个答案: