jQueryで別のHTMLから情報を取得する方法

2008/09/17 18:24

このQ&Aのポイント

現在レンタルのショッピングカートにてウェブサイトを立ち上げているところです。こちらのショッピングカートの会社ではjQueryを採用しています。質問ですが、こちらではカートに入っている金額情報を自動生成されるページのみでしか表示させることができない仕様です。この金額情報をHTMLから取り出し、同ドメインの別のページへ表示させたいのですが、方法を教えていただけますでしょうか。
金額情報を表示したいページのソースを見ますと、カートに入っている商品の種類を表す要素があり、その下に金額情報を表示する要素があります。この要素構造を利用して、jQueryを使って金額情報を取得し、別のページに表示させることが可能です。
具体的な方法は以下の通りです。まず、金額情報を表示させたいページの要素を特定し、その要素に対してjQueryのセレクタを使用してアクセスします。次に、取得した要素のテキストを取得し、表示させたいページにある適当な要素にそのテキストを挿入します。これにより、金額情報が別のページに表示されるようになります。

pyasha
お礼率33% (1/3)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2008/09/18 11:10 回答No.2

#1です。多少、コーディングの知識があれば考え方はそれほど難しくはないと思いますが、メソッドやプロパティを知らないと面倒ですね。おおむね、以下のような流れでなんとかなると思います。ご質問の情報からだと、<p>タグでclass名がpriceを持っている表示文字ということで特定できるように見受けられますが、実際の内容に応じてアレンジしてください。 1）読み取る際の対象を指定できるように、自動生成されるウィンドウにあらかじめtargetなどで名前を付けておく。 2）そのウィンドウのドキュメント（ソース）に対して、以下の処理を行う。　2-1対象となるタグを探す。（例ではdivタグ）　　elm = document.getElementsByTagName("div");　など　　（該当オブジェクトは複数あるので、elmは配列になります。）　2-2この要素に対してclassがpriceのものを探す。　　for ( e=0; e<elm.length; e++) { 　　　if (elm[e].className=="price") txt = elm[e].innerText; 　　} 　elm[e]に対して、表示テキストだけをとるなら、innerText、HTMLごと読みとるならinnerHTMLを利用することで文字列として内容（金額情報）を参照できます。　あとは、必要に応じて適当に処理してください。だいたいこんな要領で目的は達せられるかと思います。注意点として、javascriptはブラウザによって多少解釈が違うので、各種ブラウザで問題なく動作するように作成することぐらいでしょうか。 javascriptの構文等の説明は、ウェブで検索すればたくさん見つかるはずですので、そちらで調べてください。

質問者

お礼 2008/09/18 14:24

お蔭様で何とか希望通りの事ができるようになりました。感謝致します。理解を深める為、自分でも勉強を続けていこうと思います。この度はご丁寧にありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

fujillin
ベストアンサー率61% (1594/2576)

2008/09/18 11:23 回答No.3

#1、#2です。ちょっと勘違いしていたかも知れません。サーバーとダイレクトにやり取りするという方法で考えていらっしゃるのでしょうか？だとすると、私の知っている範囲を超えています。　すみません。別にAJAXのカテゴリーがありますので、そちらで質問した方が良い回答がえられるかも・・・

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2008/09/17 20:20 回答No.1

相手が自動生成のページだとすると、別のページが読み取るタイミングをどうするつもりなのでしょうか？そのサイトで＞金額情報を自働生成されるページのみでしか表示させる事ができない仕様ですとなっているのは、そのようにする理由があるからではないのでしょうか？他のページには表示ないようにという様なルールがあるとか、何かきちんとした理由があるのではないのかなぁ?? 質問を読む限りでは、技術的には○○を探して、××を照合すれば、読み出すことは不可能ではないみたいだけど・・・

質問者

補足 2008/09/17 22:12

＞相手が自動生成のページだとすると、別のページが読み取るタイミングをどうするつもりなのでしょうか？商品説明・選択画面：カート内金額表示無し ↓ 商品購入：レジ画面に飛び、カート内金額表示 ↓ 続けて買い物する→商品説明・選択画面：カート内金額表示なしという流れになりまして、商品説明・選択画面に飛んだ際に読み取るようにと考えております。カート内に商品が入ってない場合には０円と表示されます。＞そのサイトで＞＞金額情報を自働生成されるページのみでしか表示させる事ができない仕様です＞となっているのは、そのようにする理由があるからではないのでしょうか？＞他のページには表示ないようにという様なルールがあるとか、何かきちんとした理由があるのではないのかなぁ?? ショッピングカートのサポートセンターまで相談してみたところ、　そのシステムをこちらで作成する事はできませんが、　金額表示するページのURL(price.html)をAjaxでアクセスし、取得したhtmlの情報を別のページに表示してください。との返答を受けまして勉強しつつ作成を試みてるのですが、未熟すぎ未だ解らず…どうぞ宜しくお願い致します。

ログインすると、全ての回答が全文表示されます。