循环内的 Jquery 和 ajax 并获得消息框的单个结果

Question

我对 java script/jquery/ajax 很陌生，需要一些指导。

在我看来，有一个下拉列表被定义为多选。当用户单击“保存”按钮时，我需要发送一个调用以插入多选中项目数的记录，然后返回一条消息，说明所有插入成功或失败。例如，为了简单起见：视图具有三个字段：F1、F2、F3，其中 F3 是多选。用户在 F1 中输入 V1，在 F2 中输入 V2，并为 F3 选择 V​​3A、V3B、V3C。所以最终，循环将需要尝试执行插入：

V1、V2、V3A 然后是 V1、V2、V3B 然后是 V1、V2、V3C

我希望向用户显示一条消息，显示如下：3 次尝试 – 2 次成功 – 1 次失败

在我的“保存”按钮上，这是代码..

("#btnSave").click(function () {

var getSelectedValue = "";
var getSelectedValueCnt = 0;

var x = document.getElementById("ddl_ValueCode");
for (var i = 0; i < x.options.length; i++) {
    if (x.options[i].selected == true) {
        getSelectedValue += x.options[i].value + ",";
        getSelectedValueCnt ++;
    }
}
getSelectedValue = getSelectedValue.substring(0, getSelectedValue.length - 1);
$('#hid_ValueList').val(getSelectedValue);

var myValue = "";
var myCount = 0;
var myMess = "";

for (var ii = 0; ii < getSelectedValue.length; ii++) {

    myValue = getSelectedValue.substr(ii, 1);
    if (myValue != ",") {

        myCount++;
        var viewModel = {
            F1: $("#txt_V1").val(),
            F2: $("#txt_V2").val(),
            F3: myValue
        };


      $.ajax({
            url: '/Information/ABC',
            type: "POST",
            dataType: "json",
            data: JSON.stringify(viewModel),
            contentType: 'application/json; charset=utf-8',
            beforeSend: function () { $("#DivLoading").dialog("open"); },
            success: function(data, textStatus, jqXHR) {

                if (data.ResultSuccess) {

                    myMess = myMess + myValue + " ";

                } else {
                    myMess = myMess + data.ResultString;
                }


                if (getSelectedValueCnt == myCount) {
                    $("#DivLoading").dialog("close");
                    $("#SuccessDisplay").html(myMess);
                    $("#SaveSuccessfulXX").dialog("open");
                    $("#btnSave").removeClass("form-primarybutton").addClass("form-disablebutton");

                }
            },

            error: function (jqXHR, textStatus, errorThrown) {
                $("#DivLoading").dialog("close");
                $("#ErrorDisplay").html(jqXHR.status + " - " + jqXHR.statusText);
                $("#Error").dialog("open");
            }
        });


    }
}

});

它成功循环并执行/尝试插入，但我不明白如何只显示一条消息和所有成功/失败消息。有人可以简单地向我解释什么是实现我需要的正确方法吗？我已经阅读并重读了许多帖子，但不清楚我需要采取什么方向/编码。谢谢。

Answer 1

您可能会收到多条消息，因为您的错误输出在您的 for 循环中。相反，您可以为消息创建一个空容器，根据需要附加它们并将它们输出到循环之外。像这样的：

var myValue = "";
var myCount = 0;
var myMess = "";

var messages = "";  //empty messages container

for (var ii = 0; ii < getSelectedValue.length; ii++) {

myValue = getSelectedValue.substr(ii, 1);
if (myValue != ",") {

    myCount++;
    var viewModel = {
        F1: $("#txt_V1").val(),
        F2: $("#txt_V2").val(),
        F3: myValue
    };


  $.ajax({
        ...
        },

        error: function (jqXHR, textStatus, errorThrown) {
            messages += jqXHR.status + " - " + jqXHR.statusText; //add current status message to container
        }
    });


}
}

//display errors outside loop
$("#DivLoading").dialog("close");
$("#ErrorDisplay").html(messages);
$("#Error").dialog("open");