0

我正在开发一个需要多个 ajax 请求的应用程序，这样只有在单击并返回其响应Option2时才可用。Button2同样，Option3只有在Button3被点击时才可用。以下是代码的一般结构。我正在php&中构建应用程序mysql。

$("#button1").click(function() {
    $.ajax({
        type: "POST",
        url:  "url-1",
        data: { id: //some-id },
        success: function(response) {
            $('.menu-right').html(response);
            $(".button2").click(function() { //button2 is created when the above response is printed as html
                $.ajax({
                    type: "POST",
                    url:  "url-2",
                    data: { id: this.id },
                    success: function(response) {
                        $('.menu-right-jump').html(response);
                        $('.button3').click(function() { ////button3 is created when the above response is printed as html
                            $.ajax({
                                type: "POST",
                                url:  "url-3",
                                data: { id: this.id },
                                success: function(response) {
                                // some things to do
                                },
                                error: function(error) {
                                    alert("Error");
                                }
                            });
                        });
                    },
                    error: function(error) {
                        alert("Error");
                    }
                });
            });
        },
        error: function(error) {
            alert("Error");
        }
    });
});

目前，一切正常。该应用程序最多可供 10,000 名用户使用。我只是想知道是否有更好的方法/或我可以合并的任何可用框架。

另外：使用这种方式可能会出现什么问题以及清除这些问题的方法。

4

2 回答 2

1

您还可以使用 jquery 的.on功能不必嵌套这些

$('body').on('click' ,'.button2', doButton2request);
$('body').on('click' ,'.button3', doButton3request);

$("#button1").click(doButton1request)

function doButton1request()
{
    do ajax and on success put in the new button
}

function doButton2request()
{
   do ajax and on success put in the new button
}

function doButton3request()
{
   do ajax and on success do "some things to do"
}

on 函数连接事件，以便每当有人点击任何东西（在'body'内），如果类是 .button2 例如，它会调用该函数，该 (this) 是匹配的项目。您可以根据需要添加和删除按钮或 .button2 类。也可以使用 .off 暂时阻止这些事件触发。

所以一般的想法是，只要你有在应用程序开始时不存在的可点击项目，你就可以设置一个 .on 事件。或者，您可以让项目在添加另一个类之前不会收到点击，例如“.active”或其他内容。

于 2013-11-01T22:06:50.427 回答
1

使用 jQuery 有一种更简洁的方法。使用.ready功能。

$("#button1").click(function() {
    $.ajax({
        type: "POST",
        url:  "url-1",
        data: { id: //some-id },
        success: function(response) {
            $('.menu-right').html(response);
        },
        error: function(error) {
            alert("Error");
        }
    });
});

//When I'm ready... provide a click event
$(".button2").ready(function(){
    $(".button2").click(function() { //button2 is created when the above response is printed as html
        $.ajax({
            type: "POST",
            url:  "url-2",
            data: { id: this.id },
            success: function(response) {
                $('.menu-right-jump').html(response);
            },
            error: function(error) {
                alert("Error");
            }
        });
    });
});
$(".button2").ready(function(){
    $('.button3').click(function() { ////button3 is created when the above response is printed as html
        $.ajax({
            type: "POST",
            url:  "url-3",
            data: { id: this.id },
            success: function(response) {
                // some things to do
            },
            error: function(error) {
                alert("Error");
            }
        });
    });
});

以你的方式到达的问题。由于太多nesting（例如，如果您需要再添加 4 个按钮），它也可能导致......技术债务更难维护。

避免创建深度嵌套的 if-then 语句，因为它们更难阅读且易于维护。资源

你可以更进一步，更好地将每个 ajax 请求封装到一个单独的函数中并编写你自己的jQuery callback.

于 2013-11-01T22:04:14.150 回答