title: JSON ajax SyntaxError: JSON.parse: unexpected character
body: <p>All I am trying to do is to build an object from the input elements typed in by the user without them clicking submit. These functions supposed to do the job, except I am not getting the $_POST array correctly at the host page:</p>
  
  <p>I started out thinking I can create a simple json object and stringify it then ajax it as a 'json' datatype.  That did not work.  I kept getting parser errors, 'unexpected character ..'. I used an outside parser to check the generated object, and it was valid every time. 
  So I modified my serialization to create a jquery.param object as you see below.  </p>
  
  <p>The output in console.log looks like this:</p>
  
  <pre><code> [ [{ hostname: 'myhostname'}, {userdb1:'mydbname'}, {adminname:'guest'}, {adminpassword:'abc123'}, {username:'muuser'}, {password:'myuser'} ] 
  </code></pre>
  
  <p>The var_dump[$_POST] at the host is this:</p>
  
  <pre><code>  Array ( [0] =&gt; [ [1] =&gt; { [2] =&gt; [3] =&gt; h [4] =&gt; o [5] =&gt; s [6] =&gt; t [7] =&gt; n [8] =&gt; a [9] =&gt; m [10] =&gt; e [11] =&gt; : [12] =&gt; [13] =&gt; ' [14] =&gt; m [15] =&gt; y [16] =&gt; h [17] =&gt; o [18] =&gt; s [19] =&gt; t [20] =&gt; n [21] =&gt; a [22] =&gt; m [23] =&gt; e [24] =&gt; ' [25] =&gt; } [26] =&gt; , [27] =&gt; [28] =&gt; { [29] =&gt; u [30] =&gt; s [31] =&gt; e [32] =&gt; r [33] =&gt; d [34] =&gt; b [35] =&gt; 1 [36] =&gt; : [37] =&gt; ' [38] =&gt; m [39] =&gt; y [40] =&gt; d [41] =&gt; b [42] =&gt; n [43] =&gt; a [44] =&gt; m [45] =&gt; e [46] =&gt; ' [47] =&gt; } [48] =&gt; , [49] =&gt; [50] =&gt; { [51] =&gt; a [52] =&gt; d [53] =&gt; m [54] =&gt; i [55] =&gt; n [56] =&gt; n [57] =&gt; a [58] =&gt; m [59] =&gt; e [60] =&gt; : [61] =&gt; ' [62] =&gt; g [63] =&gt; u [64] =&gt; e [65] =&gt; s [66] =&gt; t [67] =&gt; ' [68] =&gt; } [69] =&gt; , [70] =&gt; [71] =&gt; { [72] =&gt; a [73] =&gt; d [74] =&gt; m [75] =&gt; i [76] =&gt; n [77] =&gt; p [78] =&gt; a [79] =&gt; s [80] =&gt; s [81] =&gt; w [82] =&gt; o [83] =&gt; r [84] =&gt; d [85] =&gt; : [86] =&gt; ' [87] =&gt; a [88] =&gt; b [89] =&gt; c [90] =&gt; 1 [91] =&gt; 2 [92] =&gt; 3 [93] =&gt; ' [94] =&gt; } [95] =&gt; , [96] =&gt; [97] =&gt; { [98] =&gt; u [99] =&gt; s [100] =&gt; e [101] =&gt; r [102] =&gt; n [103] =&gt; a [104] =&gt; m [105] =&gt; e [106] =&gt; : [107] =&gt; ' [108] =&gt; m [109] =&gt; u [110] =&gt; u [111] =&gt; s [112] =&gt; e [113] =&gt; r [114] =&gt; ' [115] =&gt; } [116] =&gt; , [117] =&gt; [118] =&gt; { [119] =&gt; p [120] =&gt; a [121] =&gt; s [122] =&gt; s [123] =&gt; w [124] =&gt; o [125] =&gt; r [126] =&gt; d [127] =&gt; : [128] =&gt; ' [129] =&gt; m [130] =&gt; y [131] =&gt; u [132] =&gt; s [133] =&gt; e [134] =&gt; r [135] =&gt; ' [136] =&gt; } [137] =&gt; [138] =&gt; ] ) 
  </code></pre>
  
  <p>what is going on here. need to get a $_POST array of these key/value simple  user created object without form serialization!</p>
  
  <p>Here are the functions </p>
  
  <pre><code>    function savePageInputs(idtags,targetOutId)
      {
          var method = 'post';
          var phpscript = 'savedata.php';
          var data = new Array();
          for(var i=0;i&lt;idtags.length;i++)
          {
              tag = idtags[i];
              data[i] = $(\"#\"+tag).val(); //get their values
          }
  
          jsonData = makeJsonData(idtags,data); //make JSON object
          shipJsonToHost(jsonData, phpscript, method, targetOutId);
      }
      function makeJsonData(idtags,values)
      {
          tag = idtags[0];
          val = values[0];
          jsonData =  '[{ '+ tag +': '+'\''+val+'\'}' ;
          for(var i=1;i&lt;idtags.length;i++)
          {                                
              tag = idtags[i];
              val = valueList[i];
              jsonData += ', {' + tag+':'+ '\''+val+'\'}' ;
          }
          jsonData +=  ' ]' ;    
          return jsonData;
      }
      function shipJsonToHost(jsonData, phpscript, method, targetOutId)
      {
          jQuery.ajaxSettings.traditional = true;
          var outputTo = $(\"#\"+targetOutId);
          outputTo.append('&lt;center&gt;Processing...&lt;br/&gt; &lt;img src=\"images/loading.gif\" height=50 width=50&gt;&lt;/center&gt;');
          $.ajax
          (
              { 
                  data: $.param(jsonData) ,
                  type: method, 
                  dataType: 'text',
                  url: phpscript, 
                  success: function(response) 
                  {                         
                      outputTo.empty();
                      outputTo.append(response);
                  },  
                  error: function(request, errorType, errorThrown)
                  {                
                      outputTo.html('Error: '+errorType+ ' '+errorThrown);
                  }
             }
          );  
      }
  </code></pre>