javascript - 迭代 ul 的所有项目并使用 ajax 调用插入数据库

Question

我是 jquery 新手。我想插入ul的所有列表项。我尝试了以下方法，但它不起作用，有人可以指导我代码有什么问题吗，就像我所做的“async:false”但它仍然不起作用

$('#sortable li').each(function () {  
            items += $(this).text();
            insertCustomBCFields($(this).text(), plu);
        });

insertCustomBCFields ftn 如下

function insertCustomBCFields(field, plu) {
        alert(field + plu);
        $.ajax({
            type: "POST",
            url: 'ProductDefinition.aspx/insertBCCustomFields',
            data: "{'field':'" + field + "', 'plu':'" + plu + "'}",
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            success: function (data) {
                alert("Success");
            },
            failure: function (response) {
                alert("Insert Failed!");
            }
        });
    }

Answer 1

使用 async: false, 进行 ajax 调用将使其成为同步调用。除非需要同步调用，否则应将此选项设置为 true 以进行异步调用 async: false,。

我可以看到，每次在 DOM 结构中找到 li 时，您都会调用 ajax 函数(现在这在性能方面非常糟糕)，好吧，那不太好，相反，您一旦所有项目都被迭代，就可以进行ajax调用。像这样的东西

    var arr="";
    var index=0;
    $('#sortable li').each(function () {  
        items += $(this).text();
        arr+="{field"+index+":" + field + , "plu"+index+":" + plu + "}";
    });
    insertCustomBCFields(arr);

同样更改ajax调用

   function insertCustomBCFields(arr) {
    alert(field + plu);
    $.ajax({
        type: "POST",
        url: 'ProductDefinition.aspx/insertBCCustomFields',
        data: {'arr':arr},
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data) {
            alert("Success");
        },
        failure: function (response) {
            alert("Insert Failed!");
        }
    });
   }

祝你编码愉快:)