Q&A
仕様ではどのような言語・方法を指定されていますか？ XSLTを使う方法、Ajaxでクライアントサイドでパースする方法、サーバサイドのスクリプトでパースする方法、などが考えられます。
「xmlファイルの値をHTMLに表示する」というシンプルな事をしたいのですが検索しても複雑なコードしか発見出来ず構文すら分からない状態です。
◆不明点
以下のxmlファイルの「<name="Emily">」の「Emily」を、
HTMLファイル「<div class = "name"><p id = "htmlId">Name</p></div>」のpタグ内「Name」に入れたいのですが構文が分かりません。。
↓test.xml
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <English> <name="Emily"> </name> </English>
↓Sample.html
<!DOCTYPE ～～～ > <html> <head> ～～ </head> <body> <div class = "name">**<p id = "">Name</p>**</div> </body> </html>
↓ajax.js
function getXmlData() { var filePath = "test.xml"; var data = new XMLHttpRequest(); data.open("GET",filePath); data.send(); data.onload = function(){ //読み込み完了時の実行内容 var date = data.responseXML; var html = document.getElementById("htmlId"); //HTMLファイル内のid名(htmlId)を変数「html」に代入 var xml = date.getElementsByTagName("name"); //XMLファイルのタグ「name」を変数「xml」に入れる html = xml; //HTMLにxml(タグ名「name」)を表示させたい };
jsファイルにXMLファイルのデータを取り込み、
取り込んだデータをHTMLに表示させる、といった処理を書いたつもりなのですが上手くいきません。(HTMLに何も表示されない)
恐らく何かが足りないのだと思うのですがそれが何かが分かりません。
XMLファイルのタグを指定する際に<name>タグは<English>タグの中に入っているから
__getElementsByTagName("English")[0];__と指定しなくてはならないでしょうか。
ご教示いただけますと助かります。
よろしくお願いいたします。
特に指定をされていないのですがそんな事はあるのでしょうか？＞＜ HTMLファイルが格納されている階層に「xml」ファイルが作成されており、その中に入っているxmlを使用してデータを抽出しHTMLに表示させるという事のみを聞いております。以前、HTMLの中でJavascriptでAPIのjsonを呼び出すという演習をした事があるのですがそれに近いと聞いています。読み込む形式がjsonかxmlの違いかだと仰っていました。情報が少なく申し訳ございません。
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
対応させるブラウザの範囲は決まっていますか？
＞ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
→ありがとうございます。試したいのですが構文が分からずそこで止まっているので構文をお聞きできればと思い投稿しました。
＞対応させるブラウザの範囲は決まっていますか？
こちらはタブレット(Android,iOS)とWindowsIE9と聞いております。よろしくお願いいたします。
モバイルとIE9以上ですか、ハードル高いですね……
jQueryは使用していいんですよね？
ハードル高いのですね^^; はい、jQueryは使用して構わないと思います！未経験の私が任されるパートなのでそんなに難しくないと予想していたのですが予想以上に難しく困っています。。
「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
xmlファイルの値をhtmlに表示させる、というのをjQueryで書きたいのですが構文が分からずどこに何を書けばいいかが分からない状態です。構文は参考書などに載っているのでしょうか。先日本屋で参考書を探し回ったのですがどの本を参考にすればいいのか分からず困っています。オススメの参考書がありましたらお教えください。よろしくお願いします。
「構文」とは？質問分に書かれたAjaxは「構文」を使っていないということでしょうか。
例えばですが、
function outputSuccess(){
var txt = $(name).find('person name').text();
$(nameOutput).text(txt); }
↑はネットで調べて書いてみたのですが、そもそもこの構文で「xmlファイルの値をHTMLに表示させる」という事が実現できているのか、それとも何か足りないのか、()内に当てはめている「name」や「person name」がそもそも間違っているのか、という事が分からずずっと悩んでおります。。
回答にて提示された「構文」は試されましたか？また、エラーの確認方法はわかりますか？
提示いただいた例も参考にしたのですが、eachやjQueryの中にhtmlを書くなど出てきてしまって私のケースにどう当てはめたらいいか分からずでした。。エラーは「要素の検証」のコンソールで見ればいいでしょうか？以下のようなエラーが出てしまいます。
jquery.min.js:4 XMLHttpRequest cannot load file:///Volumes/xxxxxx.heteml.jp/xml/text_Port.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
getAjaxData @ ajax.js:23
loadAjax @ ajax.js:17
n @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2
何故か他のxmlファイルについてのエラーが出てしまいます。。
kei344さんの回答は試されましたか？ また、その結果はいかがでしたか？
each文が出てくるパターンだったので試すことが出来ませんでした。(単純にxmlファイル内の１つのタグを取得してHTMLに表示させたいという処理のみをしたいため・・)each文が入ったことによってコードが分からなくなってしまいました。。
おっしゃっていることが分かりません。「kei344さんの回答は試されましたか？」という質問に対する応答が「each文が出てくる」でよろしいのでしょうか？
kei344さんの回答とはどちらの回答でしょうか？kei344さんの回答「回答にて提示された「構文」は試されましたか？また、エラーの確認方法はわかりますか？」を試されましたかと質問されたと思ったのですが。
「質問への追記・修正、ベストアンサー選択の依頼」欄と「回答」欄があり、いまやりとりをしているのは、「質問への追記・修正、ベストアンサー選択の依頼」欄です。teratailで「回答」と補足なしに書く場合は「回答」欄にある回答のことを指します。
あら、いなくなっちゃったよ…… なんだったんだ一体……
回答2件
0
以下のようなエラーが出てしまいます。 jquery.min.js:4 XMLHttpRequest cannot load file:///Volumes/xxxxxx.heteml.jp/xml/text_Port.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery.min.js:4 ajax @ jquery.min.js:4 getAjaxData @ ajax.js:23 loadAjax @ ajax.js:17 n @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 B @ jquery.min.js:2
Chromeはローカルファイルを開いた状態（ファイルを選択してブラウザで表示）ではAjaxが機能しません。回避方法もありますが、サーバを用意するかFirefoxなど別のブラウザでテストするなどのほうが早いかもしれません。
【ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法 - Qiita】
http://qiita.com/nissuk/items/1ede2953a8661dc59214
【【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita】
http://qiita.com/growsic/items/a919a7e2a665557d9cf4
【[その他] ChromeにてAjaxでローカルファイルにアクセス - Qiita】
http://qiita.com/cigalecigales/items/33afaa42f91542ffa62e
投稿2017/07/23 07:51
総合スコア69625
0
『jQuery+XMLを読み込む』でググるといろいろ出てきますね。
jquery で xml ファイルを読み込む | hacknote
jQueryでXMLの読み込み＆出力をする
IE9以上条件であれば、jQueryのバージョンは1.x系にした方がいいと思います。
投稿2017/07/21 04:26
総合スコア37437
あ、調べたら、3.x系でもIE9+の対応のようでした。失礼いたしました。
ありがとうございます。上記読んだのですが構文の意味が読み取れず・・。どこかのページで値表示だけであればfind()とtext()で出力できると知ったのですがそれを使用しての記述方法がイマイチ分からず失敗してしまいます。。
あなたの回答
tips
プレビュー
