通过jQuery编写JSON数据

时间:2015-10-09 14:26:44

标签: javascript php jquery json

我尝试将JSON数据写入JSON文件。 这是我在HTML页面中的脚本:

 <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可以使用的唯一结构。 一个人就是很多。但是我怎样才能改变它以及在哪里。

1 个答案:

答案 0 :(得分: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&amp; 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."     }   } }

您可以使用http://jsonprettyprint.com/

轻松验证生成的JSON字符串的结构

其他一些建议:

希望这有帮助。