2015-10-06 2 views
1

Есть ли возможность конвертировать HTML-таблицу в JSON с PHP?Таблица HTML в файл JSON через AJAX

У меня есть этот JavaScript:

<script> 
(function() { 
    var jsonArr = []; 
    var obj = {}; 
    var rowIx = 0; 
    var jsonObj = {}; 
    var thNum = document.getElementsByTagName('th').length; 
    var arrLength = document.getElementsByTagName('td').length; 

    for(i = 0; i < arrLength; i++){ 
     if(i%thNum === 0){ 
      obj = {}; 
     } 
     var head = document.getElementsByTagName('th')[i%thNum].innerHTML; 
     var content = document.getElementsByTagName('td')[i].innerHTML; 
     obj[head] = content; 
     if(i%thNum === 0){ 
      jsonObj[++rowIx] = obj 
     } 
    }   

    var result = "<br>"+JSON.stringify({"Values": jsonObj}); 
    document.write(result); 
})(); 
</script> 

который использует ниже 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> 
</TABLE> 

генерировать этот 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":"Free."}}} 

Сценарий является совершенным, но мне нужно скрипт, который автоматически сохраняет данные JSON в файл на сервере без какого-либо взаимодействия с пользователем ,

+0

Можно отправить его на страницу PHP через AJAX и просто написать страницу PHP в файл. – Twisty

+0

и как? У вас есть ссылка или что-то еще? –

+0

Это зависит от того, что вы пробовали? Хотите использовать JQuery или необработанный JavaScript? Когда PHP получает данные, вы хотите, чтобы он записывал их в txt-файл или json-файл. Что вы хотите, чтобы имя файла было? Вы отправляете электронное письмо после его создания? Хранение ссылки в базе данных? Вам нужно больше информации о том, чего вы хотите достичь. – Twisty

ответ

1

Если вы говорите, что ваша логика JS совершенна, вот PHP (версия 5.3+), использующая DOM, как ваш код.

Эта функция загружает html-файл (вы можете использовать curl, если это URL-адрес), а затем конвертировать его и сохранять в файл.

function save_table_to_json ($in_file, $out_file) { 
    $html = file_get_contents($in_file); 
    file_put_contents($out_file, convert_table_to_json($html)); 
} 

function convert_table_to_json ($html) { 
    $document = new DOMDocument(); 
    $document->loadHTML($html); 

    $obj = []; 
    $jsonObj = []; 
    $th = $document->getElementsByTagName('th'); 
    $td = $document->getElementsByTagName('td'); 
    $thNum = $th->length; 
    $arrLength = $td->length; 
    $rowIx = 0; 

    for ($i = 0 ; $i < $arrLength ; $i++){ 
     $head = $th->item($i%$thNum)->textContent; 
     $content = $td->item($i)->textContent; 
     $obj[ $head ] = $content; 
     if(($i+1) % $thNum === 0){ // New row. Slightly modified to keep it correct. 
      $jsonObj[++$rowIx] = $obj; 
      $obj = []; 
     } 
    } 

    return json_encode([ "Values" => $jsonObj ]); 
} 

// Example 
save_table_to_json('table.html', 'data.json'); 
+0

Благодарим вас за ответ. Это дает мне следующее: «{« Ценности »: [{« Datum »:« 23.10. »,« Vertreter »:« KUL »,« Art »:« Vertretung »,« Stunde »:« 9 »,« Fach »: «O5», «Klasse (n)»: «5Z», «Raum»: «C111», «(Lehrer)»: «GAT», «(Raum)»: «C310», «Vertr. Von»: \ u00a0 "," Vertretungs-Text ":" \ u00a0 "," (Le.) nach ":" Klassenfahrt 10 A "}, {" Datum ":" 2.' Поэтому он помещает данные в массив. Мне нужно это: '{« Значения »: {« 1 »: {« Голова »:« данные »,« Голова2 »:« Данные2 »},« 2 »{' также с идентификатором, который должен быть сгенерирован автоматически. Не могли бы вы мне помочь? –

+0

@ MariusSchönefeld Очень наблюдательный. Это правда, есть языки, где это имеет значение. Я снова добавил переменную rowIx, которая должна получить нужный результат :) – Sheepy

+0

Эй, у меня проблема со сценарием теперь он говорит в консоли Неожиданный токен '>' в этой строке '$ document-> loadHTML ($ html);' –

0

Лично мне нравится использовать JQuery, но если вы не знаете или не можете вставить его как SRC, тогда мы должны предположить использование JavaScript. Таким образом, мы отправим данные JSON на наш PHP через AJAX, когда страница будет загружена. Затем PHP запишет этот JSON в новый файл на сервере с именем subs.json и будет перезаписываться каждый раз при запуске скрипта.

Мы начнем с JavaScript:

<script> 
function collectData() { 
    var jsonArr = []; 
    var obj = {}; 
    var rowIx = 0; 
    var jsonObj = {}; 
    var thNum = document.getElementsByTagName('th').length; 
    var arrLength = document.getElementsByTagName('td').length; 

    for(i = 0; i < arrLength; i++){ 
     if(i%thNum === 0){ 
      obj = {}; 
     } 
     var head = document.getElementsByTagName('th')[i%thNum].innerHTML; 
     var content = document.getElementsByTagName('td')[i].innerHTML; 
     obj[head] = content; 
     if(i%thNum === 0){ 
      jsonObj[++rowIx] = obj; 
     } 
    }   
    return jsonObj; 
} 

function postJSONData(json){ 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("POST", "/subPost.php"); 
    xmlhttp.setRequestHeader("Content-Type", "application/application/x-www-form-urlencoded"); 
    xmlhttp.onreadystatechange = function() { 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      var return_data = xmlhttp.responseText; 
      alert(return_data); 
     } 
    } 
    xmlhttp.send("values="+JSON.stringify(json)); 
} 

postJSONData(collectData()); 
</script> 

На данный момент, страница должна опубликовать JSON в PHP страницу под названием subPost.php находится на том же уровне, что и страница, которая выполняется этот JS. Это PHP будет выглядеть следующим образом:

<?php 
if(isset($_POST['values'])){ 
     $values = $_POST['values']; 
     $fp = fopen('subs.json', 'w'); 
     fwrite($fp, $values); 
     fclose($fp); 
     echo "Values written to subs.json.\r\n"; 
} else { 
     echo "No Post data received."; 
} 
?> 

Я сделал рабочий пример можно посмотреть здесь: http://www.yrmailfrom.me/projects/testPost/ и содержание http://www.yrmailfrom.me/projects/testPost/subs.json является:

{"1":{"<font face=\"Arial\" size=\"3\">Date</font>":"<font face=\"Arial\" size=\"3\">24.9.</font>","<font face=\"Arial\" size=\"3\"><b>Teacher</b></font>":"<font face=\"Arial\" size=\"3\"><b><strike>Dohe</strike></b></font>","<font face=\"Arial\" size=\"3\">?</font>":"<font face=\"Arial\" size=\"3\">Free</font>","<font face=\"Arial\" size=\"3\">Hour</font>":"<font face=\"Arial\" size=\"3\">1</font>","<font face=\"Arial\" size=\"3\">Subject</font>":"<font face=\"Arial\" size=\"3\"><strike>Math</strike></font> ","<font face=\"Arial\" size=\"3\">Class</font>":"<font face=\"Arial\" size=\"3\">(9)</font> ","<font face=\"Arial\" size=\"3\">Room</font>":"<font face=\"Arial\" size=\"3\">---</font> ","<font face=\"Arial\" size=\"3\">(Teacher)</font>":"<font face=\"Arial\" size=\"3\"><strike>Dohe</strike></font>","<font face=\"Arial\" size=\"3\">(Room)</font>":"<font face=\"Arial\" size=\"3\">A001</font>","<font face=\"Arial\" size=\"3\">XYY</font>":"

Это не является допустимым JSON. Похоже, что некоторые данные неправильно истолковываются. Я подозреваю, что это связано с символами значений, например &nbsp;. Я вижу это в публикуемых данных:

"<font face=\"Arial\" size=\"3\">XYY</font>":" 
    [nbsp;","<font_face] => \"Arial\" size=\"3\">(Le.) nach</font>":"<font face=\"Arial\" size=\"3\" 
>Free.</font>"}} 

я смог преодолеть это с другой маленькой функцией JS:

function nbsp2space(str) { 
    return String(str).replace(/&nbsp;/g, ' '); 
} 

Затем использовать эту функцию в collectData() как так:

obj[head] = nbsp2space(content);

Теперь, когда страница выполняется, мы отправляем данные в PHP и записываем в файл subs.json.

+0

благодарим вас за код !!!!! Я интегрировал его на своем сервере, но его по-прежнему был неправильным форматом JSON. –

+0

Что вы видите в своем 'subs.json'? Также используя FireBug в FireFox, что вы публикуете точно? – Twisty

+0

В sub.json говорится: '{" 1 ": {" Date ":" 24.9. ", ...' и это именно то, что я отправляю –

0

Вы можете попробовать некоторые вещи, как это:

HTML

<table> 
<tr> 
<th>No</th> 
<th>Name</th> 
<th>Email</th> 
</tr> 
<tr> 
<td>1</td> 
<td>Test</td> 
<td>[email protected]</td> 
</tr> 
<tr> 
<td>2</td> 
<td>Test 2</td> 
<td>[email protected]</td> 
</tr> 
<tr> 
<td>3</td> 
<td>Test 3</td> 
<td>[email protected]</td> 
</tr> 
</table> 

Javascript

<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> 

JSON.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])); 

} 

$json = json_encode($json); 
// TODO with $json eg: file_put_contents(); 

выход вы получите после того, как json_encode() является:

{"values":[{"1":{"No":"1","Name":"Test","Email":"[email protected]"}},{"2":{"No":"2","Name":"Test 2","Email":"[email protected]"}},{"3":{"No":"3","Name":"Test 3","Email":"[email protected]"}}]} 

ПримечаниеjQuery должен быть включен перед запуском этого.

+0

Благодарим за код. Результат должен быть '{" values ​​": {" 1 ": {" Name ":" тест «„Электронная почта“:» тест @ пример.com "}, {" 2 ": {" Name ":" Test 2 "," Email ":" [email protected] "}' –

+0

, тогда вы можете просто: '$ json = json_encode (array ('values' => $ json)); echo $ json; ' –

+0

http://pastebin.com/1ufPXPKn и http://pastebin.com/DJvk9wiu это мой код, но он не работает –

Смежные вопросы