Используя jQuery / javascript, как правильно проанализировать таблицу HTML для отправки содержимого каждой строки для обновления в базу данных

Question

Я загружаю элементы в базу данных из таблицы (таблица заполняется из электронной таблицы MS Excel, поэтому содержит фиксированные столбцы и переменные строки). Вызов ajax для записи второй строки содержит данные из первой строки. Однако, когда я добавляю «alert», данные о каждом вызове ajax верны. Как мне убедиться, что все данные, полученные при разборе строки, были получены до вызова ajax?

    var firstName = '';
    var surname = '';
    $("#wrapper tbody tr").each(function() {
        var row = $(this).index() + 1; // +1 since index is 0 based
        $('td', this).each(function() {
            if (row > 1) {
                var $col = $(this);
                var col = $col.index() + 1;
                var text = $.trim($col.text()); // GET TRIMMED TEXT

                if (col === 1){
                    firstName = text;
                }
                if (col === 2){
                    surname = text;
                }
            }
        });
        if (row > 1) {
            alert("firstName: " + firstName + " surname: " + surname);

            //ajax call to server to add to database

        row++;
    });

Это то, что я изменил выше:

function sendRequest() {
//Get the default image
    var img2 = '';
    toDataURL('images/YouthMember.jpg', function(dataUrl) {
        img2 = dataUrl.replace(/^data:image\/(png|jpg|jpeg|gif);base64,/, "");
    })

    var records = getRecords();
    console.log("Records: " + records);
    var jsonRecords = JSON.stringify(records);

    //ajax call to server to add to database
    $.ajax({
        url : 'BulkUploadMembersView', // Your Servlet mapping or JSP(not suggested)
        type : 'POST',
        dataType : 'json',
        data : {
            ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
            ssAccountID : sessionStorage.getItem('ssAccountID'),
            ssGroupNoAdd : sessionStorage.getItem('ssGroupNoAdd'),

            image : img2,
            memberList: jsonRecords,
        },

        })
        .fail (function(jqXHR, textStatus, errorThrown) {
            //alert(jqXHR.responseText);
            $('#ajaxGetUserServletResponse3').text('Error adding member.');
        })
        .done(function(responseJson){
            $('#ajaxGetUserServletResponse3').text('Member added.');
            showActionPlanDataTable();
    })
}

function getRecords() {
    var records  = [];
    var keyNames = ['firstName', 'surname', 'dob', 'scoutNumber', 'joiningDate'];

    $("#wrapper tbody tr").each(function(i) {

        if (i === 0) {
            i++
            return;
        }

        var record = {};
        $('td', this).each(function(j) {
            if (keyNames[j]){
                var text = $.trim($(this).text()); // GET TRIMMED TEXT

                record[keyNames[j]] = text;
            }
        });
        records.push(record);
    });

    return records;
}

Answer 1

Глядя на ваш код, похоже, что вы отправляете последнюю запись каждый запрос.

Я не рекомендую отправлять запрос ajax для каждой строки. Но если вам нужно это сделать, попробуйте следующее:

function getRecords() {
  var records  = [];
  var keyNames = ['firstName', 'surname'];

  $("#wrapper tbody tr").each(function(i) {

    if (i === 0) { 
       return;
    }

    var record = {};
    $('td', this).each(function(j) {
        if (keyNames[j]){
          var text = $.trim($(this).text()); // GET TRIMMED TEXT
          record[keyNames[j]] = text;
        }
    });

    records.push(record);
  });

  return records;
}

function sendRequest() {
  var records = getRecords();
  console.log(records);
  //ajax call to server to add to database
}

sendRequest();

Я настоятельно рекомендую вам отправлять более одного предмета за раз.