1. 首頁
  2. 問答
  3. 通過jQuery寫入JSON數據

通過jQuery寫入JSON數據

2015-10-09 52 views
2

我嘗試將JSON數據寫入JSON文件。 這是我在HTML頁面的腳本：通過jQuery寫入JSON數據

<script type="text/javascript"> 
     jQuery(document).ready(function(){ 
      data = new Array(); 
      columns = []; 
      var row = new Array(); 
      $('table tr').each(function(index,tr){ 
       var index = index; 
       if(index == 0){ // First we get column names from th. 

       $(tr).find('th').each(function(thIndex,thValue){ 
        columns.push($(thValue).text()); 
       }); 
       } else { 
       $(tr).find('td').each(function(tdIndex,tdValue){ 
        row[tdIndex] = $(tdValue).text(); // Put each td value in row 
       }); 

       data.push(row); // now push each row in data. 
       row = new Array(); // reset row after push 
       } 

      }); 
     // Send it to PHP for further work: 
      $.post('json.php', { data: data, columns: columns }, function(response){ 
      // TODO with response 
      }); 
     }) 
     </script>

和這個PHP

<?php 
$data = $_POST['data']; // Each rows values 
$columns = $_POST['columns']; // Columns names 


for($i = 0; $i < count($data); $i++) { 

    $json[] = array(($i+1) => array_combine($columns, $data[$i])); 

} 
// 


$json1 = json_encode(array('values' => $json)); 

$jsonString = str_replace(utf8_encode("\u00a0"),"",$json1); 
$jsonString1 = str_replace(utf8_encode("["),"",$jsonString); 
$jsonString2 = str_replace(utf8_encode("]"),"",$jsonString1); 

//str_replace(array('[',']',array('{','}'),$json1)) 
file_put_contents('data.json', $jsonString2) 
?>

我的HTML：

<html> 
<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1"> 
<TR> 
<TH align=center><font size="3" face="Arial">Date</font></TH> 
<TH align=center><font size="3" face="Arial"><B>Teacher</B></font></TH> 
<TH align=center><font size="3" face="Arial">?</font></TH> 
<TH align=center><font size="3" face="Arial">Hour</font></TH> 
<TH align=center><font size="3" face="Arial">Subject</font></TH> 
<TH align=center><font size="3" face="Arial">Class</font></TH> 
<TH align=center><font size="3" face="Arial">Room</font></TH> 
<TH align=center><font size="3" face="Arial">(Teacher)</font></TH> 
<TH align=center><font size="3" face="Arial">(Room)</font></TH> 
<TH align=center><font size="3" face="Arial">XYY</font></TH> 
<TH align=center><font size="3" face="Arial"><B>Information</B></font></TH> 
<TH align=center><font size="3" face="Arial">(Le.) nach</font></TH> 
</TR> 
<TR><TD align=center><font size="3" face="Arial">24.9.</font></TD> 
<TD align=center><font size="3" face="Arial"><B><strike>Dohe</strike></B></font></TD> 
<TD align=center><font size="3" face="Arial">Free</font></TD> 
<TD align=center><font size="3" face="Arial">1</font></TD> 
<TD align=center><font size="3" face="Arial"><strike>Math</strike></font> </TD> 
<TD align=center><font size="3" face="Arial">(9)</font> </TD> 
<TD align=center><font size="3" face="Arial">---</font> </TD> 
<TD align=center><font size="3" face="Arial"><strike>Dohe</strike></font></TD> 
<TD align=center><font size="3" face="Arial">A001</font></TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center><font size="3" face="Arial">Free.</font></TD> 
</TR> 
<TR><TD align=center><font size="3" face="Arial">26.9.</font></TD> 
<TD align=center><font size="3" face="Arial"><B><strike>John</strike></B></font></TD> 
<TD align=center><font size="3" face="Arial">Free</font></TD> 
<TD align=center><font size="3" face="Arial">8</font></TD> 
<TD align=center><font size="3" face="Arial"><strike>Bio</strike></font> </TD> 
<TD align=center><font size="3" face="Arial">(9)</font> </TD> 
<TD align=center><font size="3" face="Arial">---</font> </TD> 
<TD align=center><font size="3" face="Arial"><strike>John</strike></font></TD> 
<TD align=center><font size="3" face="Arial">A021</font></TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center><font size="3" face="Arial">Freeeeeee.</font></TD> 
</TR> 
</TABLE> 

<script type="text/javascript"> 
     jQuery(document).ready(function(){ 
      data = new Array(); 
      columns = []; 
      var row = new Array(); 
      $('table tr').each(function(index,tr){ 
       var index = index; 
       if(index == 0){ // First we get column names from th. 

       $(tr).find('th').each(function(thIndex,thValue){ 
        columns.push($(thValue).text()); 
       }); 
       } else { 
       $(tr).find('td').each(function(tdIndex,tdValue){ 
        row[tdIndex] = $(tdValue).text(); // Put each td value in row 
       }); 

       data.push(row); // now push each row in data. 
       row = new Array(); // reset row after push 
       } 

      }); 
     // Send it to PHP for further work: 
      $.post('json.php', { data: data, columns: columns }, function(response){ 
      // TODO with response 
      }); 
     }) 
     </script> 

</html>

現在我得到的迴應：

{"value": {"1":{"Hello":"Test", "Test":"Hello"}},{"2":{"Jello":"Test", "Test":"Jello"}}}

但我需要這個結構：

{"value": {"1":{"Hello":"Test", "Test":"Hello"},"2":{"Jello":"Test", "Test":"Jello"}}}

因爲這是我的App可以使用的唯一結構。 一}很多。但是我怎麼能改變這個以及在哪裏。

來源

2015-10-09 Marius Schönefeld

+2

您需要修復您的應用程序，因爲它們都不是有效的JSON – mplungjan

+0

爲什麼要分別發送列和數據？ – n00dl3

+1

這是有效的：'{ 「值」：{ 「1」：{ 「你好」： 「測試」， 「測試」： 「你好」 }， 「2」：{ 「果凍」： 「測試」， 「測試」：「果凍」 }} } ' – mplungjan

回答

1

的主要問題就在這裏：

for($i = 0; $i < count($data); $i++) { 

    $json[] = array(($i+1) => array_combine($columns, $data[$i])); 

}

這條線：

$json[] = array(($i+1) => array_combine($columns, $data[$i]));

應該

$json[$i+1] = array_combine($columns, $data[$i]);

這裏是json.php工作的源代碼：

<?php 
$data = $_POST['data']; // Each rows values 
$columns = $_POST['columns']; // Columns names 


for($i = 0; $i < count($data); $i++) {  

    $json[$i+1] = array_combine($columns, $data[$i]); 

} 

$json1 = json_encode(array('values' => array($json))); 

$jsonString = str_replace(utf8_encode("\u00a0"),"",$json1); 
$jsonString1 = str_replace(utf8_encode("["),"",$jsonString); 
$jsonString2 = str_replace(utf8_encode("]"),"",$jsonString1); 

//str_replace(array('[',']',array('{','}'),$json1)) 
file_put_contents('data.json', $jsonString2); 
?>

這裏是工作HTML &的JavaScript：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script> 
</head> 
<body> 
<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1"> 
<TR> 
<TH align=center><font size="3" face="Arial">Date</font></TH> 
<TH align=center><font size="3" face="Arial"><B>Teacher</B></font></TH> 
<TH align=center><font size="3" face="Arial">?</font></TH> 
<TH align=center><font size="3" face="Arial">Hour</font></TH> 
<TH align=center><font size="3" face="Arial">Subject</font></TH> 
<TH align=center><font size="3" face="Arial">Class</font></TH> 
<TH align=center><font size="3" face="Arial">Room</font></TH> 
<TH align=center><font size="3" face="Arial">(Teacher)</font></TH> 
<TH align=center><font size="3" face="Arial">(Room)</font></TH> 
<TH align=center><font size="3" face="Arial">XYY</font></TH> 
<TH align=center><font size="3" face="Arial"><B>Information</B></font></TH> 
<TH align=center><font size="3" face="Arial">(Le.) nach</font></TH> 
</TR> 
<TR><TD align=center><font size="3" face="Arial">24.9.</font></TD> 
<TD align=center><font size="3" face="Arial"><B><strike>Dohe</strike> </B></font></TD> 
<TD align=center><font size="3" face="Arial">Free</font></TD> 
<TD align=center><font size="3" face="Arial">1</font></TD> 
<TD align=center><font size="3" face="Arial"><strike>Math</strike></font>  </TD> 
<TD align=center><font size="3" face="Arial">(9)</font> </TD> 
<TD align=center><font size="3" face="Arial">---</font> </TD> 
<TD align=center><font size="3" face="Arial"><strike>Dohe</strike></font> </TD> 
<TD align=center><font size="3" face="Arial">A001</font></TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center><font size="3" face="Arial">Free.</font></TD> 
</TR> 
<TR><TD align=center><font size="3" face="Arial">26.9.</font></TD> 
<TD align=center><font size="3" face="Arial"><B><strike>John</strike> </B></font> 
</TD> 
<TD align=center><font size="3" face="Arial">Free</font></TD> 
<TD align=center><font size="3" face="Arial">8</font></TD> 
<TD align=center><font size="3" face="Arial"><strike>Bio</strike></font> </TD> 
<TD align=center><font size="3" face="Arial">(9)</font> </TD> 
<TD align=center><font size="3" face="Arial">---</font> </TD> 
<TD align=center><font size="3" face="Arial"><strike>John</strike></font></TD> 
<TD align=center><font size="3" face="Arial">A021</font></TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center>&nbsp;</TD> 
<TD align=center><font size="3" face="Arial">Freeeeeee.</font></TD> 
</TR> 
</TABLE> 

<script type="text/javascript"> 
     jQuery(document).ready(function(){ 
      data = new Array(); 
      columns = []; 
      var row = new Array(); 
      $('table tr').each(function(index,tr){ 
       var index = index; 
       if(index == 0){ // First we get column names from th. 

       $(tr).find('th').each(function(thIndex,thValue){ 
        columns.push($(thValue).text()); 
       }); 
       } else { 
       $(tr).find('td').each(function(tdIndex,tdValue){ 
        row[tdIndex] = $(tdValue).text(); // Put each td value in row 
       }); 

       data.push(row); // now push each row in data. 
       row = new Array(); // reset row after push 
       } 

      }); 
     // Send it to PHP for further work: 
      $.post('json.php', { data: data, columns: columns },  function(response){ 
       // TODO with response 
       console.log('response',response); 
       }); 
      }) 
      </script> 

    </body> 
    </html>

產生的JSON字符串將是：

{ "values": {  "1": {  "Date": "24.9.",  "Teacher": "Dohe",  "?": "Free",  "Hour": "1",  "Subject": "Math ",  "Class": "(9) ",  "Room": "--- ",  "(Teacher)": "Dohe",  "(Room)": "A001",  "XYY": "",  "Information": "",  "(Le.) nach": "Free."  },  "2": {  "Date": "26.9.",  "Teacher": "John",  "?": "Free",  "Hour": "8",  "Subject": "Bio ",  "Class": "(9) ",  "Room": "--- ",  "(Teacher)": "John",  "(Room)": "A021",  "XYY": "",  "Information": "",  "(Le.) nach": "Freeeeeee."  } } }

您可以驗證所產生的JSON字符串的結構很容易通過使用http://jsonprettyprint.com/

幾點附加建議：

希望這有助於。

來源

2015-10-15 02:46:14

相關問題

 相關問題