jQuery.ajax里面的一切（{success：

Question

首先，我道歉 - 我的英语不好。

将所有主要代码置于成功设置中是不是一种糟糕的方法（$ .ajax（{success :)） - 例如，我在文件mydata.json中有这个JSON：

[
    {
        "name": "Aster",
        "product": "aster",
        "stock": "10",
        "price": "2.99"
    },
    {
        "name": "Daffodil",
        "product": "daffodil",
        "stock": "10",
        "price": "1.99"
    },
    {
        "name": "Rose",
        "product": "rose",
        "stock": "2",
        "price": "4.99"
    },
    {
        "name": "Peony",
        "product": "peony",
        "stock": "3",
        "price": "1.50"
    },
    {
        "name": "Primula",
        "product": "primula",
        "stock": "20",
        "price": "3.12"
    },
    {
        "name": "Snowdrop",
        "product": "snowdrop",
        "stock": "5",
        "price": "0.99"
    },
    {
        "name": "Carnation",
        "product": "carnation",
        "stock": "1",
        "price": "0.50"
    },
    {
        "name": "Lily",
        "product": "lily",
        "stock": "2",
        "price": "1.20"
    },
    {
        "name": "Orchid",
        "product": "orchid",
        "stock": "5",
        "price": "10.99"
    }
]

而且，我的代码看起来像这样：

$.ajax({
    url: "mydata.json",
    success: function (data) {
        var html = '';
        $.each(data, function (key, value) {
            html += '<div class="dcell">';
            html += '<img src="images/' + value.product + '.png">';
            html += '<label for="' + value.product + '">' + value.name + ':</label>';
            html += '<input id="' + value.product + '" type="text" required="" value="0" name="' + value.product + '" stock="' + value.stock + '">'
            html += '</div>';
        });
        $(html).filter("div").slice(0, 3).appendTo("#drow1");
        $(html).filter("div").slice(3, 6).appendTo("#drow2");
        $(html).filter("div").slice(6).appendTo("#drow3");

        $("<div id='errorContainer'>Odgovor...:</div>")
            .addClass("inputGreska").append("<ul id='errorLabelContainer'></ul>").hide().insertAfter("h1");

        $("form").validate({
            highlight: function (element, errorClass) {
                $(element).addClass("invalidElem");
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass("invalidElem");
            },
            errorContainer: "#errorContainer",
            errorLabelContainer: "#errorLabelContainer",
            wrapper: "li",
            errorElement: "div"
        });

        var plurals = {
            aster: "Asters",
            daffodil: "Daffodils",
            rose: "Roses",
            peony: "Peonies",
            primula: "Primulas",
            snowdrop: "Snowdrops",
            carnation: "Carnations",
            lily: "Lillies",
            orchid: "Orchids"
        }

        $("input").each(function (index, elem) {
            $(elem).rules("add", {
                required: true,
                min: 0,
                digits: true,
                messages: {
                    required: "Please enter a number of " + plurals[elem.name],
                    digits: "Please enter a number of " + plurals[elem.name],
                    min: "Please enter a positive number of " + plurals[elem.name]
                }
            })
        }).change(function (e) {
            $("form").validate().element($(e.target));
        });


        $("#drow2, #drow3").hide();

        $("<a id='left'></a>").prependTo("#oblock").css({
            "background-image": "url(images/leftarrows.png)",
                "display": "block",
                "float": "left",
                "width": "50px",
                "height": "50px",
                "margin-top": "15px"
        }).hover(handleMouseEnter).click(handleMouseClick);
        $("<a id='right'></a>").appendTo("#oblock").css({
            "background-image": "url(images/rightarrows.png)",
                "display": "block",
                "float": "right",
                "width": "50px",
                "height": "50px",
                "margin-top": "15px"
        }).hover(handleMouseEnter).click(handleMouseClick);

        function handleMouseEnter(e) {
            if (e.type == 'mouseenter') {
                $(this).css({
                    "background-position": "-50px 0px",
                        "cursor": "pointer"
                });
            } else {
                $(this).css({
                    "background-position": "0px 0px"
                });
            }
        }

        function handleMouseClick(e) {
            var redovi = ["drow1", "drow2", "drow3"];
            var trenutniRed = $("div.drow:visible");
            var indexTrenutnogReda = jQuery.inArray(trenutniRed.attr("id"), redovi);
            var indexNovogReda;
            if ($(this).attr("id") == "left") {
                indexNovogReda = indexTrenutnogReda - 1;
                if (indexNovogReda < 0) {
                    indexNovogReda = redovi.length - 1;
                }
            } else {
                indexNovogReda = (indexTrenutnogReda + 1) % redovi.length;
            }
            trenutniRed.fadeOut("fast", function () {
                $("#" + redovi[indexNovogReda]).fadeIn("fast");
            });
        }

        $("#buttonDiv").prepend("<div>Total Items: <span id='total'>0</span></div>");
        $("input").change(function (e) {
            $("form").validate().element($(e.target));
            var total = 0;
            $("input").each(function (index, value) {
                total += Number($(value).val());
            });
            $("#total").text(total);
        })
    }
})

如您所见 - 所有内容都在success的{​​{1}}属性中。

对于这个特殊的例子，我知道它可以用不同的方式完成，所以jQuery.ajax()里面几乎没有 - 但是，它有什么不同吗？或者，没关系？

提前致谢！