4

jsonp 呼び出しから json データを取得しています。データは順調に戻ってきています。1 つのデータ要素は、何らかの html を含む文字列の形式です (「p」タグ、「a」タグ)。この要素 (画像の説明) を jQuery ダイアログ ボックス内に出力しようとしています。$.parseHTML を使用するかどうかに関係なく、何らかの理由で html としてレンダリングできません。

コードスニペット：

var image       = data.image;
var title       = data.title;
var id          = data.id;
var description = $.parseHTML( data.description );
var media       = data.media;
var secret      = data.secret;
if(media == "photo"){
    var string  = "<div id=\"picturebox\" class=\"picturebox\">\n";
    string += "    <img src=\""+image + "\" id=\"photo_"+id+"\" />\n";
    string += "    <h2>" + title + "</h2>\n";
    string += "    <p>" + description + "</p>\n";
    string += "</div>\n";
    $('#gbFullPic').html(string);
}

動的に生成された div は画像とタイトルを含めて正しく表示されますが、「説明」行は次のように出力されます: [object Text]

$.parseHTML を削除すると、出力は次のようになります。

Bird of paradise growing in south Florida.<p><a href="http://www.popgnology.com/guestbook.php">ACME Adventures</a></p>

私のhtml出力に実際のhtmlタグが表示されなかった場合は、もちろん問題ありません。私は何を間違っていますか？

更新 (2 回目のリビジョン): 以前のソリューションは不完全でした。問題は、単一の jquery または javascript ソリューションよりも複雑でした。

問題はサーバー側で始まり、不正な形式の html が送信されました。

header('content-type: application/json; charset=utf-8');
echo $cid . '('.json_encode($data).')';

  • サーバー側 (PHP) では、次のように「説明」項目を調整する必要がありました (htmlspecialchars_decode と addslashes ラッパーの追加に注意してください)。

      if($k == "description"){ 
    $data["$k"] = addslashes(htmlspecialchars_decode($v));
  }
  else{
    $data["$k"] = $v;
  }

  • 次に、この JavaScript は json データ項目を適切にレンダリングしました。

    var description   = data.description.replace('\\','');

サーバー ページで配信形式を修正し、クライアント側で .replace を使用してスラッシュを削除するという 2 段階のプロセスにより、「説明」は HTML ページ上のすべてのテキストと HTML 要素を適切に表示します。

4

2 に答える 2

5

私の推測では、あなたの data.description はエスケープされており、メソッド parseHTML はそれを処理しません。解決策については、この投稿をご覧ください。

Javascript デコード HTML エンティティ

var text = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
var decoded = $('<div/>').html(text).text();
alert(decoded);

だからあなたの場合：

var decoded = $('<div/>').html(data.description).text();
$('#gbFullPic').html(decoded);
于 2013-04-29T23:38:41.287 に答える
4

試すvar description = $($.parseHTML(data.description)).html();

jQuery のparseHTMLは、DOM ノードの配列を返します。それらをDOMに挿入することもできますが、あなたの場合はそれらを取得し.html()て文字列に追加する必要があります。

于 2013-04-29T23:35:55.113 に答える