JSONデータをべたべた触る＠初級
JSONデータをテーブルで書き出したいのだけど、さっぱりjqueryなるものがわからないので、まずは「書き出す」というところから入ろうと、Google先生によさげなページを聞いた。
シンプルなHTMLにjquery1.3.2をインストールして、JSONデータを読み込んで…
ボタンをポチると”XMLHttpRequest cannot load 場所とファイル名 Origin null is not allowed by Access-Control-Allow-Origin.”とエラー。
load() を使うと Chrome が文句言う - 積極的にメモっていく姿勢
Chromeのベースにある、ローカルファイルに対するセキュリティの考え方が、これを実行不可能にしている様子。
原因と対策がばっちりかかれていた。確かにChrome使ってて出た。
起動オプション - Google Chrome まとめWiki
ちなみに微妙に半角入れないとだめ。
半角スペースを空けてオプションを追加していきます。
※先頭に半角スペースを入れ忘れると [OK] または [適用] をクリックしたときに「受け側に指定されたパス名 ～ は無効です」とエラーが表示されます。
ちょっと変な所で寄り道してしまったけど、Chromeだとおかしいことになることもあると知れたのでよし。
11/20追記
jQueryでJSONのデータ取得し、テーブルに表示するプラグインを作成する - Symfoware
これを参考にこんな感じのHTML作って
自分が使いたいようなデータと部品でアレンジしていたら、
Uncaught ReferenceError: $ is not defined (anonymous function)
というエラーが出た。ググった。
» 【メモ (jQuery)】 Uncaught ReferenceError: $ is not defined (anonymous function)_DD_log
どうやらhtmlのhead要素内の記述に問題があったようです。
確かに、順番がおかしかったかも。
Before:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.plugin_sample.js"></script>
<script type="text/javascript" src="js/jquery.plugin_mode.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
After:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.plugin_mode.js"></script>
<script type="text/javascript" src="js/jquery.plugin_sample.js"></script>
これでエラーが出なくなった。
この順番を気にしなくていいようにするのがrequire.jsなのかな～？
JS の読込み順を征する者は なんか色々征する！ with CoffeeScript - glasses factory
昔目にしてブクマしといたけど、実際にこうやって問題に直面してから思い出して、頭の中でつながると気持ちいい。
