Q&A
コメント、ご回答ありがとうとざいます。
ご提示いただきました、ページも是非参考にさせて頂きます。
Ajaxに未だ不案内であり、非同期通信ができるということしか知らず
抽象的に質問かもしれず申し訳ございませんがお伺いさせてください。
現在、下記のように左右のBoxA及びBoxBがあり、甲を見たい場合「甲を表示する」を選択することにより
ページを遷移せずにBoxBにxxx.phpの内容を表示させたいと考えております。
もちろん、その後同じページで乙を見たい場合にはページを遷移することなく、「乙を表示する」を選択するにより
同様に閲覧可能という仕組みです。
もちろん、選択肢が少なく単純なものであれば
描写するdivを用意しておきJSでclickイベントでshow/hide等で切り替え表示すれば実現できますが
選択肢が非常に多く、表現するものが複雑なため、予めHTMLの要素にこれらを読み込ませておくのは
非現実的か思っております。
技術的にこのようなことが可能であるのか？また、このようなことを実装したい場合参考になるようなサイト等をご教示頂ければ
幸いわいです。
宜しくお願いいたします。
HTML
1<div id="boxA" style="float:left;width:500px;height:800px;border: solid 1px #454545"> 2 <p><a href="xxx.php">甲を表示する</a></p> 3 <p><a href="yyy.php">乙を表示する</a></p> 4 5</div> 6 7<div id="boxB" style="float:left;margin-left:10px;width:500px;height:800px;border: solid 1px #454545"> 8 9</div> 10
改めて、より具体的な目的を書きに加筆させて頂きます。
単純化するつもりでアンカータグにしましたが、実際には外部のファイルの特定のタグをDOM(PHP)で抽出して表示させることが目的です。ユーザーの操作でboxAでkoというvalueを取得し、これを元に特定のディレクトリからko.phpをloadして、id="ko_1"のタグを取得し、BoxBに表示するということになります
ko.php
otsu.php
<div id="otsu_1"></div> <div id="otsu_2"></div>
回答3件
0
ベストアンサー
甲がxxx.phpで乙がyyy.phpだとしてそれをアンカーで呼び出せるようになっているということは
それぞれがhtmlとして完結していると考えてよいですね？
そうなると非同期で甲や乙のデータを持ってきても、もろもろの競合が発生するので
BoxBに表示することは困難です。
あまりお勧めできませんがご希望の処理はiframeでなさるのが妥当です
追記
xxx.phpやyyy.phpを部品として取り込むのであればこうしてください
- mypage.htm
HTML
1<style> 2#boxA{float:left;width:500px;height:800px;border: solid 1px #454545;} 3#boxB{float:left;margin-left:10px;width:500px;height:800px;border: solid 1px #454545;} 4.xxx{background-Color:lime;} 5.yyy{background-Color:aqua;} 6</style> 7<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8<script> 9$(function(){ 10 $('#boxA a').on('click',function(e){ 11 var me=$(this); 12 $.ajax({ 13 url:me.attr('href'), 14 success:function(data){ 15 $('#boxB').html(data); 16 }, 17 }); 18 e.preventDefault(); //アンカーのclickを無効にする 19 }); 20}); 21</script> 22 23<div id="boxA"> 24 <p><a href="xxx.php">甲を表示する</a></p> 25 <p><a href="yyy.php">乙を表示する</a></p> 26</div> 27<div id="boxB"> 28</div> 29
- xxx.php
PHP
1<div class="xxx">test</div> 2<div class="xxx">test</div> 3<div class="xxx">test</div>
- yyy.php
PHP
1<div class="yyy">test</div> 2<div class="yyy">test</div> 3<div class="yyy">test</div>
投稿2017/04/14 03:01
編集2017/04/14 03:35
総合スコア114829
0
結論からいえばajaxとはまさにそのようなことをするための方式と言えると思います。サーバーとブラウザー間の通信を前提とするため必然的に非同期になるわけですがajaxというキーワードで検索すると多数のサンプルや解説がでてきますのでわかりやすそうなものを漁ってみるとよいと思います。
jQueryとajaxのサンプルが載ってるこんなページなんかもよいかも知れません。
自分もWebそのものに暗くこうしたことを学び中です。
投稿2017/04/14 02:58
総合スコア18394
0
描写するdivを用意しておきJSでclickイベントでshow/hide等で切り替え表示すれば実現できますが
選択肢が非常に多く、表現するものが複雑なため、予めHTMLの要素にこれらを読み込ませておくのは
非現実的か思っております。
「表現するものが複雑」がどういう複雑さかはわかりませんが、あとからJavaScriptでHTMLを挿入するならば複雑さの問題はどちらも同じではないでしょうか。わざわざ別ファイルに書き出すほうが問題が複雑になると思います。
投稿2017/04/14 05:20
総合スコア69407
コメントありがとうございます。
上記に加筆しておりますが、より具体的には外部に既に1000近くのファイルがあり、ここからユーザの選択に応じて、必要なファイルの関連するタグのnodeValueを取得します。と言ってもこのそれぞれのタグの中身も2Mを超えるようなデータのため、これを予めHTMLに読み込むべきか否かに懐疑的でした。ajaxに明るくないため、それと比較してどのように相違するかは未だ分かりませんが、私個人の印象としては、ページを遷移せずにこの必要タグ部分だけを取得しにいくため、処理の負担が大きく相違するのではないかと想像をした次第でございます。もちろん、実際にajaxでの処理はそのようなものではないという可能性もございますが。
宜しくお願い申し上げます。
文字列で2Mbyteの分量ならページを普通に移動するほうが良いとは思います。それか、「1000近くのファイル」の特定のファイルを取得するページを作って、それをiframe内に表示させるとかでしょうか。（選択したタイミングでiframeを書き換える）
コメントありがとうございます。
なるほど、承知を致しました。そのような発想に至らなかったため、大変助かります。
宜しくお願い申し上げます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/14 03:08
2017/04/14 03:16 編集
2017/04/14 03:23
2017/04/14 03:36
2017/04/14 03:42 編集
2017/04/14 03:46
2017/04/14 03:50