javascript - 通过 jQuery 写入 JSON 数据

标签 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"}}}

因为这是我的应用程序可以使用的唯一结构。 一个 } 太多了。但是我怎样才能改变它以及在哪里。

最佳答案

主要问题就在这里:

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."     }   } }

您可以使用 http://jsonprettyprint.com/ 轻松验证生成的 JSON 字符串的结构

一些额外的建议:

希望这对您有所帮助。

关于javascript - 通过 jQuery 写入 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33040792/

上一篇：javascript - 如何更改 Angular JS 中的 JSON 数据格式？

下一篇：javascript - 数据库获取后便士拍卖计时器更新

相关文章：

javascript - 在服务器上保存 JavaScript 变量

javascript - 我连续有三列，但是当我将值放入第一列时，它会自动转到所有其他两列

php - zend引发错误

php - Laravel 从模型中提取自定义方法

javascript - 在 jQuery 中更改图像的尺寸

javascript - 视频播放，然后 onend() 覆盖带有链接的静态图像

javascript - jQuery 第二次点击调用函数

PHP 和 Ajax 文件上传 - 无法使用 $_FILES 获取 tmp_name

jquery - Jqgrid不显示来自json的数据

javascript - 如何使用 Reactjs 中的按钮重定向到另一个页面

©2024 IT工具网  联系我们