2011-08-02 7 views
5

私はJSONデータからHTMLを生成するためにjQueryテンプレートプラグインを使用しています。これは、ユーザが操作するよりも(潜在的に変更される)です。このHTMLをJSONに読み込む方法を探していますので、私のサーバーに保存することができます。 jQueryは、最初に設定したdata JSONを返す$.tmplItem()メソッドを提供していますが、現在のDOMにあるように値を取得する方法は不思議です。jQuery HTML to JSON

答えて

7

これはいかがですか?

http://jsfiddle.net/mWuHe/14/

その後、JSONに戻し、それを変換し、お住まいの地域のHTMLを引き出し:

$(':button').click(function() { 
 
    $('#output').text(JSON.stringify({ 
 
     data:$('#input').html() 
 
    })); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="input" contenteditable="true" style="border: 1px solid;width:300px; height:100px;"><b>Edit me!</b> You can use CTRL+B to change bold, ctrl+I to change italics.</div> 
 
<div style="clear:both;"> 
 
    <input type="button" value="Get HTML"> 
 
</div> 
 
<div id="output" style="border: 1px solid;clear:both;width:300px;height:100px;font-family:courier;font-size:10px;"> 
 

 
</div>

をところで私はsimplictyためJSON.stringifyを使用しますが、本番環境で使用しますおそらくjquery-jsonのようなライブラリを使うはずです。なぜならそれをサポートしていない古いブラウザの中にはまだまだ不公平だからです。

+3

あなたの回答は、HTML構造と一致する深いJSONネストをサポートしていません。これはハックエドフードの解決策のほうがはるかです。 – vsync

+0

失敗事例と代替案の例を提供したい場合は、必ず実行してください。しかし、HTMLの単純な文字列(なぜなら、単にASCIIです)が何であってもJSONをエンコードできないという明白な理由は考えられません。単なる文字列であり、それによって表現される「構造」とは無関係です。 HTMLをJavaScriptのオブジェクト構造に解析しようとしているわけではありません。文字列としてサーバーにすべて渡すだけです。 –

+1

http://stackoverflow.com/q/7993066/104380 – vsync

0

これを行うには、jQuery data link pluginなどのデータバインディングや、現在のニーズに多少の差があります。Knockout