1

エラーチェックと解析のためにAJAX経由でPHPファイルに情報を渡すフォームデータシリアル化関数を作成しています。技術的に.serialize()は JQuery でメソッドを使用できることはわかっていますが、データをさらに制御する必要があります。基本的に、フォームのフィールドを解析して多次元 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;
}

したがって、1 次元で実行されている場合はうまく機能します。つまり、 name 属性はname="[email]"orのように単純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 内の既存のオブジェクトが各反復で上書きされないようにする方法が必要です。

助けてくれてありがとう！

4

2 に答える 2

0

多くの調査を行った後、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 で同様のことを行う方法を誰かが知っている場合は、ぜひ聞いてください。

于 2013-07-11T05:31:37.527 に答える