Json не передает html теги

Содержание

Write HTML string in JSON
15 Answers 15
» > ]
При получении HTML через AJAX отображаются теги. Почему?
Handling html code in JSON
3 Answers 3

Write HTML string in JSON

Is it possible to write an HTML string inside JSON? Which I want to write like below in my JSON file:

I don’t know much about JSON, but i think you should use escape sequences for quotes after class, » like \» .

15 Answers 15

You should escape the characters like double quotes in the html string by adding «\«

I have changed my code as below but still it is showing validation error in JSONLint validator [ < "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": "

» > ]

Just encode html using Base64 algorithm before adding html to the JSON and decode html using Base64 when you read.

byte[] utf8 = htmlMessage.getBytes("UTF8"); htmlMessage= new String(new Base64().encode(utf8)); byte[] dec = new Base64().decode(htmlMessage.getBytes()); htmlMessage = new String(dec , "UTF8");

You can, once you escape the HTML correctly. This page shows what needs to be done.

If using PHP, you could use json_encode()

json_encode works:- $design=file_get_contents(‘test.html’); $design=json_encode($design); $json = ‘<"message":<"html": '.$design.'>>’;

4 Things You Must Do When Putting HTML in JSON:

1) Escape quotation marks used around HTML attributes like so

2) Escape the forward slash in HTML end tags. Hello World!. This is an ancient artifact of an old HTML spec that didn’t want HTML parsers to get confused when putting strings in a tag. For some reason, today’s browsers still like it.

3) This one was totally bizarre. You should include a space between the tag name and the slash on self-closing tags. I have no idea why this is, but on MOST modern browsers, if you try using javascript to append a
tag as a child of an unordered list that is formatted like so: , it won’t work. It gets added to the DOM after the ul tag. But, if the code looks like this: (notice the space before the /), everything works fine. Very strange indeed.

4) Be sure to encode any quotation marks that might be included in (bad) HTML content. This is the only thing that would really break the JSON by accidentally terminating the string early. Any » characters should be encoded as " if it is meant to be included as HTML content.

Lets say I’m trying to render the below HTML.

let myHTML = "Go to this website 
"; JSON.parse(JSON.stringify(myHTML))

This would give you a HTML element which you can set using innerHTML.

document.getElementById("demo").innerHTML = JSON.parse(JSON.stringify(myHTML));

People are storing their HTML as an object here. However the method I suggested does the same without having to use an Object.

Источник

При получении HTML через AJAX отображаются теги. Почему?

Есть древовидная структура, раскрывающаяся +/-. В ней должны быть таблицы. Работаю с twig, через $twig->render данные для таблиц передаются в шаблон, итоговый HTML запоминается в ассоциативный массив. Кроме HTML в массиве еще всякие служебные значения вроде id и parent_id. Массив передается с сервера через JSON аяксом (jquery). Используется библиотека jqTree для построения дерева. Так вот, мне вместо таблицы отображается следующее

Похоже, где-то экранируются теги. точно не twig — если выводить из шаблона без аякса одну табличку — все норм. Виноват либо json_encode в php либо jqTree либо функция getJSON в jquery.

Может кто сталкивался? Подскажите, что делать?

Виноват jqTree — только что проверил. Без него 1 табличка через аякс передается((

Здравствуйте. Да, это json_encode. Вообще-то это не совсем правильно, передавать html внутри json-объекта, но если уж вам так этого хочется, воспользуйтесь JSON-константами.
Для вашего случая, это JSON_HEX_QUOT и JSON_HEX_TAG, но там есть и другие, то есть на сервере

echo json_encode( array('test' => 'YOUR_HTML'), JSON_HEX_QUOT | JSON_HEX_TAG );

Также, ЕМНИП, у .ajax есть свойство type, куда можно также указать JSON. Но как ни крути, передавать html в json-объекте, не лучшая практика 🙂

Не похоже на json_encode, т.к. если убрать дерево (jqtree) и передавать одну табличку аяксом — все работает

Не похоже на json_encode, т.к. если убрать дерево (jqtree) и передавать одну табличку аяксом — все работает

Ну все правильно, ибо JqTree на вход приходят неправильно расрас JSON-на, вот и получается белиберда на выходе 🙂 Я сейчас быстренько проверил на своем сервачке

echo json_encode( array('test' => ' ') );

Ни getJSON, ни parseJSON, ни type: ‘JSON’ у .ajax не могут распрарсить мне нормально HTML, ибо он невалидный (экранирован после json_encode)

echo json_encode( array('test' => ' '), JSON_HEX_QUOT | JSON_HEX_TAG );

При такой отдаче, все символы преобразуются в HEX, и любой parserJSON/getJSON/etc парсит HTML без проблем.

Покажите код, как с сервера отсылаете данные

Если можно еще: заголовки ответа сервера.
+ версию PHP, ибо эти константы работают только с версии 5.3.0 и выше. Проверить это можно, посмотрев ответ сервера, если символы «» или двойная кавычка не перекодированы, значит константы не срабатывают.

 'compilation_cache', )); $servername = "localhost"; $username = "root"; $password = "random123"; $dbname = "onepage"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); if (mysqli_connect_errno()) < printf("Connect failed: %s\n", mysqli_connect_error()); exit(); >$sql = "SELECT * FROM tables ORDER BY parent_id DESC"; $res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn)); $data = mysqli_fetch_all($res, MYSQLI_ASSOC); foreach ($data as $key => &$value) < $value['id'] = (int)$value['id']; $value['label'] = $twig->render('tables.twig', $value); foreach ($data as &$value2) < if($value['parent_id'] == $value2['id'])< $value2['children'][] = $value; unset($data[$key]); >> > $data = array_values($data); unset($value); unset($value2); echo json_encode($data);

если добавить константы — ничего не меняется
Сейчас остальное напишу

А теперь, подставьте константы в json_encode и запостите ответ в чистом виде, то есть не через getJSON/parse/etc, а обратитесь к скрипту, напрямую, через браузер или консоль, и ответ сюда, вместе с заголовками, если можно.
P.S. только сделайте плиз в селекте LIMIT 0,1, чтобы не было портянок, ну или на pastebin.

Ничего не меняется в ответе? Вы точно ответы в чистом выводе смотретите, а не после getJSON’на?

[,<"id":2,"number":"2","name":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435","description":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435","parent_id":"0","children":[<"id":3,"number":"2.1","name":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435","description":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435","parent_id":"2","label":"\u003Ctable\u003E\n\t\u003Ctr\u003E\n\t \u003Ctd\u003E2.1\u003C\/td\u003E\n\t \u003Ctd\u003E\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u003C\/td\u003E\n\t\u003C\/tr\u003E\n\u003C\/table\u003E">,<"id":4,"number":"2.2","name":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435","description":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435","parent_id":"2","children":[<"id":5,"number":"2.2.1","name":"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435","description":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435","parent_id":"4","label":"\u003Ctable\u003E\n\t\u003Ctr\u003E\n\t \u003Ctd\u003E2.2.1\u003C\/td\u003E\n\t \u003Ctd\u003E\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u003C\/td\u003E\n\t\u003C\/tr\u003E\n\u003C\/table\u003E">,],"label":"\u003Ctable\u003E\n\t\u003Ctr\u003E\n\t \u003Ctd\u003E2.2\u003C\/td\u003E\n\t \u003Ctd\u003E\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u003C\/td\u003E\n\t\u003C\/tr\u003E\n\u003C\/table\u003E">,],"label":"\u003Ctable\u003E\n\t\u003Ctr\u003E\n\t \u003Ctd\u003E2\u003C\/td\u003E\n\t \u003Ctd\u003E\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u003C\/td\u003E\n\t \u003Ctd\u003E\u003C\/td\u003E\n\t\u003C\/tr\u003E\n\u003C\/table\u003E">,]

Connection: Keep-Alive Content-Length: 4031 Content-Type: text/html; charset=UTF-8 Date: Sat, 06 Feb 2016 12:31:06 GMT Keep-Alive: timeout=5, max=96 Server: Apache/2.4.17 (Win32) OpenSSL/1.0.2d PHP/5.6.14

Qwentor ★★★★★ ( 06.02.16 15:33:26 MSK )
Последнее исправление: Qwentor 06.02.16 15:34:28 MSK (всего исправлений: 1)

Заголовок то какого хрена у тебя text/html? Должно быть application/json.

Твиг не при чем скорее всего. Переменные подставляю текстовые.

Потом сохраняю все в переменную

Все окей, парсится в нужную структуру:

[ < description: "Описание", id: 1, label: " 1  Название  Описание  
 
", name: "Название", number: "1", parent_id: "0" >, . ]

А теперь, я иду на офф. документацию JqTree (ты же этот плагин имеешь ввиду?)
http://mbraak.github.io/jqTree/
И вижу, тут же, в демо:

Там же, рядом, справа — отображается результат, то есть label, это просто какое-то наименование, а ты туда пихаешь целую html-таблицу. Ты этот плагин имел ввиду? Или какой-то другой?

Ну не было пока времени убунту на новый ноут накатить) Как только так сразу)

Да, этот. Может из-за этого и не выходит ничего. Какой посоветуете тогда другой, чтоб точно все работало?

Что должно работать-то? Это ведь просто плагин состовления древовидной структуры, из обычного JSON. То есть, label, это просто ярлычек, и из вашей структуры должно было выйти, что-то наподобии:

 node1(it_is_label) child1(it_is_label) child2(it_is_label) node2(is_is_label) .

А вы, в is_is_label, хотите чтобы была таблица с заголовком? Я совсем не понимаю, что вы хотите получить в итоге. Если расскажите, то я посоветую дельный плагин.
Я не качал этот плагин, и не был в коде, я думаю что в label вставляются данные «как есть», то есть html код экранируется и отображается просто со всеми символами, то есть вы можете найти это внутри плагина, и изменить на нужный вам результат, но я даже не могу предположить зачем вам это? Какого конечного результата вы добиваетесь?

Конечный результат:
вместо строчки-названия должна быть таблица, слева от нее +/- для открытия подтаблицы и т.д. Т.е. должен быть не маленький заголовок, а содержимое. Возможно, это будет выглядеть кривовато, но так нужно. Спасибо за то, что со мной возились)) А за плагин был бы безмерно благодарен

вы можете найти это внутри плагина, и изменить на нужный вам результат

Ну или можно почитать документацию. Вот что я там нашел. http://mbraak.github.io/jqTree/examples/06_autoescape.html То есть, если выставить

То символы не будут экранироваться. Скачал плагин, проверил. Все окей, только таблица отображается криво, ибо у них идет вставка через метод в коде (строка 1623, если ничего там не меняли)

NodeElement.prototype.getSpan = function() < return this.$element.children('.jqtree-element').find('span.jqtree-title'); >;

Поэтому ваша таблица все равно попадет в span. Что вам не подходит, поэтому придется изменить код плагина. Дописывайте новую функцию NodeELement.prototype.getDiv, и меняйте везде в коде на getSpan, если установлен какая-либо опция. Придумайте любую свою опцию (label_is_html), допустим. Ну или вы можете тупо изменить getSpan, если вам до фени на код, в-принципе там у них все равно не айс код 🙂

Нет, извиняюсь, поторопился, элемент создается в функции createTitleSpan (строка 650)

ElementsRenderer.prototype.createTitleSpan = function(node_name, level, is_selected, is_open, is_folder) < var classes, title_span; title_span = document.createElement('span'); classes = "jqtree-title jqtree_common"; if (is_folder) < classes += " jqtree-title-folder"; >title_span.className = classes; title_span.setAttribute('role', 'treeitem'); title_span.setAttribute('aria-level', level); title_span.setAttribute('aria-selected', util.getBoolString(is_selected)); title_span.setAttribute('aria-expanded', util.getBoolString(is_open)); if (is_selected) < title_span.setAttribute('tabindex', 0); >title_span.innerHTML = this.escapeIfNecessary(node_name); return title_span; >;

Меняйте здесь, лучше добавьте еще один параметр, как в функцию (is_html_label), и если true, то создавайте title через div, а еще лучше напишите метод createTitleDiv, чтобы не от отставать от библиотеки. Только не забудьте потом изменить нужные вам стили в jqtree.css

Источник

Handling html code in JSON

I am writing code that will use AJAX requests to get some HTML code from the server to embed, but I cannot seem to get the JSON format correct. Can anyone tell me what I am doing wrong?

When I try to run JSON.parse() on it, I get a syntax error Here is the code I am using to read the JSON:

3 Answers 3

” and » are different characters. You need stright quotes, not curly ones. (Tell your browser to zoom in if you can’t see the difference … and don’t use an editor (e.g. many word processors) that converts to curly quotes automatically, use a proper text editor (I’m fond of ActiveState Komodo)).

Old answer (before the JSON in the question was revised):

The first thing you are probably doing wrong, is trying to build JSON by hand. Use a library instead.

The second thing you are doing wrong is HTML encoding (badly) your quote marks. To escape a » inside a JSON string you represent it as \» .

The third thing (but it could be just that you are giving a poor example) is bothering to use an array for a single object.

When I try to run JSON.parse() on it, I get a syntax error

Despite the problems with it, what you have is valid JSON, so that should not happen. You appear to have reduced your test case so far that the problem you are having doesn’t appear in it.

Источник