將HTML名稱屬性轉換為Javascript對象

Question

我正在創建一個表單數據序列化功能，該功能通過AJAX將信息傳遞給PHP文件以進行錯誤檢查和解析。 我知道我可以在JQuery中使用.serialize()方法，但是我需要對數據進行更多控制。 基本上，我想將表單中的字段解析為多維Javascript對象，然后將其轉換為JSON以通過AJAX發送。 我已經建立了一種大多數情況下都可以使用的方法，但是仍然存在一些缺陷。 這是我的Javascript / JQuery代碼：

var formData = { };

function serializeAllFormData() {
   $(':input').not('button').each(function() {
      //This pulls the fields name for use in error message generation
      var fieldName = $(this).parent().children('label').html();

      //Takes the value of the field
      var value = $(this).val();

      //This section finds all fields that needs additional error checking like email/url
      var allClasses = $(this).attr('class');
      allClasses = allClasses.match(/special_(\w*)/);
      if (allClasses != null) {
         var special = allClasses[1];
      }
      else {
          var special = '';
      }

     //Takes the name attribute such as '[contact][email]' and makes an array of just the names. ['contact', 'email']
     var locationArray = $(this).attr('name').match(/\w+/g);

     //Making a temporary object that will be nested. This object holds all the necessary information for parsing in my errorCheck.php file.
     tempObj = { };
     tempObj[0] = value;
     tempObj[1] = fieldName;
     tempObj[2] = $(this).attr('name');
     tempObj[3] = special;

     //Iterate through, starting with the smallest child of the name attribute and working backwards, nesting the objects
     var length = locationArray.length;
     for (i = length; i > 0; i--) {
         locationName = locationArray[i-1];
         if (i > 1) {
            var tempObj2 = { };
            tempObj2[locationName] = tempObj;
            tempObj = tempObj2;
        }

        //For the last iteration, nest the object in the formData variable itself
        if (i == 1) {
            formData[locationName] = tempObj;
        }
    }
});
   formData = JSON.stringify(formData);
   return formData;
}

因此，如果它僅在一維中運行，它將非常有用。 即name屬性很簡單，例如name="[email]"或name="[phone_number]" 。 但是，一旦到達更復雜的多維字段，formData對象將僅保留最后一個字段。 在每次迭代期間，都會覆蓋formData對象。 例如，如果我具有以下HTML結構：

<div><label>Email</label><input type="text" name="[contact][email]" /></div>
<div><label>Phone Number</label><input type="text" name="[contact][phone]" /></div>

如果我運行該方法，則一般結構如下所示： Object (contact => Object (phone => Object (0 => "", 1 => "Phone Number", 2 => "[contact][phone]", 3 => "")))

因此，我需要一種方法來確保formData中的現有對象不會在每次迭代時都被覆蓋。

謝謝你的幫助！

Answer 1

嘗試正確初始化您的臨時變量。 例如：

var tempObj = [];

現在，您實際上正在創建全局變量，這些變量在每次迭代中都可以重用。

Answer 2

經過大量研究，我確定無法完全使用Javascript完成我想做的事情，因此我創建了一個解決方法。 我在上面的代碼中進行了編輯，以便每個字段的索引鍵都只是全名屬性本身。 因此，例如，如果name屬性為[contact][email]則生成的對象將類似於此Object => ('[contact][email]' => Object (0 => '', 1 => 'Email', 2 => '[contact][email]', 3 => '')) 。 然后，一旦將該對象轉換為JSON，我就通過AJAX將其傳遞給我的PHP文件。 進入PHP文件后，我運行以下代碼將其轉換為多維數組：

的PHP

$multiDimensional = array();

foreach ($formData as $key => $field) {
    preg_match_all('/\w+/', $key, $keyArray);
    $keyArray = $keyArray[0];
    $length = count($keyArray);
    switch ($length) {
       case 1:
           $multiDimensional{$keyArray[0]} = $field;
           break;
       case 2:
           $multiDimensional{$keyArray[0]}{$keyArray[1]} = $field;
           break;
       case 3:
           $multiDimensional{$keyArray[0]}{$keyArray[1]}{$keyArray[2]} = $field;
           break;
       case 4:
           $multiDimensional{$keyArray[0]}{$keyArray[1]}{$keyArray[2]}{$keyArray[3]} = $field;
           break;
       case 5:
           $multiDimensional{$keyArray[0]}{$keyArray[1]}{$keyArray[2]}{$keyArray[3]}{$keyArray[4]} = $field;
           break;
   }
}

它有點笨重，但是可以用。 $multiDimensional的結構遵循HTML name屬性的結構。 但是，如果有人知道如何用Javascript做類似的事情，我很想聽聽它！