0

現在、私はウェブページのリンクをデザインしています。サイトの[プロジェクト]タブで、適切なプロトコルの経験がないために問題が発生しています（申し訳ありません）。サイドメニューには、表示するコンテンツ（CAD、FEA、MATLABなど）を選択するオプションがあり、選択したコンテンツがサイトのメインコンテンツセクションに表示されます。私が直面している問題は、javascript / jqueryを使用してすべてのコンテンツを1ページに表示し、ユーザーがアンカーを使用して選択したときにさまざまなセクションを表示/非表示にすると、コンテンツが非常に多いため、ページの読み込みが非常に遅くなることです。 。このような状況でAJAXを使用する方がよいかどうか疑問に思っていました。その場合、コンテンツセクション内にこの新しいコンテンツを読み込むにはどうすればよいですか（iframeを使用するか、新しいページを作成しますか？）私はまだajaxをよく知りませんが、学ぶ意欲/熱心です）、または標準のjqueryの表示/非表示を維持する方が良い場合は、一方が他方よりも優先される理由は何ですか？私がロードしているこのコンテンツは静的コンテンツになります

4

4 に答える 4

2

jQuery ajaxを使用して、コンテンツをオンデマンドでロードできます。loadメソッドはこれに適しています。

あなたはjQueryとajaxと混同していると思います。jQueryは、私たちの生活を楽にするjavascriptライブラリです。jQueryがなくても、ajaxを実行できますが、前述したように、これにより私たちの生活が楽になります。それを使用します。

メインページにリンクまたはメニューを表示するためのこのようなマークアップと、リンクのコンテンツを表示するための別のdivがあり、このページにもjQueryライブラリが含まれていると仮定します。

<div class="divNavigation">
  <a href="about.html" class="ajaxLink" >About</a>
  <a href="about.contact" class="ajaxLink">Contact</a>
  <a href="about.team" class="ajaxLink">Team</a>
</div>
<div id="divContentArea">
</div>

次に、これらのリンクのいずれかのクリックイベントをリッスンしてから、リンクのターゲットのコンテンツを非同期でロードし、非同期呼び出しの結果をコンテンツdivにロードします。

このjavasctiptを追加します

<script type="text/javascript">

  $(function(){ 

       $("a.ajaxLink").click(function(e){    // #1
          e.preventDefault();                     // #2
          var linkTargetUrl=$(this).attr("href");   // #3
          $("#divContentArea").load(linkTargetUrl);  // #4

       });    
  });

</script>

ここで何をしているの？

＃1：click CSSクラス名ajaxLinkを持つDOM内のすべてのタグのイベントを探しています。それらにクリックイベントが発生するたびに、内部コードが実行されます。

  • クラス名を持つ要素を選択する場合は、を使用します$(".className")。ここで、classNameは要素のCSSクラス名です。この例では、そのクラス名を持つすべてのアンカータグを指定するようにjqueryに指示しています。

  • IDを持つ要素を選択する場合は、を使用します$("#elementID")。ここで、elementIDは要素のCSSIDです。

jQueryセレクターの詳細についてはこちらをご覧ください。

＃2：ページが実際にターゲットURLに移動することなく、コンテンツを非同期でロードします。したがって、リンククリックのデフォルトの動作を防ぐ必要があります。これを行うには、preventDefaultメソッド（jQueryライブラリで記述）を使用しています。そのため、ページはそのまま残ります。リロードはありません。

＃3：hrefリンクのプロパティ値を読み取り、その値をローカル変数に設定しています。$(this)現在アクティブ化されているアイテムを意味します。アンカータグのclinkイベント内で作業しているため$(this)、クリックされたアンカー要素を意味します。

＃4：（jQueryの）loadメソッドを使用してajax呼び出しを行っています。このメソッドは、ターゲットURLのコンテンツをロードし、Idを使用してdivの内部htmlとして設定しdivContentAreaます。

サンプルコードを試してみることをお勧めします。変数/オブジェクトにalert/console.debugを配置し、どのような値が来るかを確認します。それがこれを学ぶための最良の方法です。幸運を。

最後のステートメント（純粋に個人的な）： jQueryは私が最近見た中で最高のものの1つです。

于 2012-08-24T20:45:14.297 に答える
0

これは、jqueryライブラリを使用した単純な表示と非表示の問題の実際の例です。

于 2012-08-24T21:44:36.263 に答える
0

実際、この場合、純粋なAjaxが最善の解決策ではないと思います。1つの理由は、ブラウザでjavascriptが無効になっている人は、サイトをナビゲートできないことです。次に、おそらくさらに重要なのは、クローラーは通常javascriptを実行しないため、ほとんどのコンテンツのインデックスを作成しないため、検索エンジンでのスコアが非常に低くなることです。

標準のhtml/phpページのセットを使用することをお勧めします。メニュー、ヘッダー、フッター、レイアウトなど、各ページで同じコンテンツのベースページを作成できます。このテンプレートには、ページごとに異なるコンテンツを含めることができます。これは、コンテンツ領域に現在ロードしているテキストとHTMLです。これは、phpなどのサーバー側スクリプトを使用して簡単に実行できます。達成するのは本当に難しいことではなく、コードを保守しやすくします。実際に異なるページを使用すると、上記の非jsユーザーとSEOiの問題が解決されます。

この構造を設定した後でも、@ Shyjuで記述されている方法でajaxを使用して、jsを使用するユーザーにより良いエクスペリエンスを提供できます。メニュー内のリンクをjs以外のユーザーの実際のページに設定する必要があります。その後、すでに示されている方法でそれらをjQueryで上書きできます。あなたがしなければならないのは、Ajax呼び出しにあなたのページ固有のコンテンツを保持しているページをフェッチさせることだけです。これは、サーバー側スクリプトがページテンプレートに含めるために使用するのと同じページである可能性があります。

于 2012-08-24T21:45:43.383 に答える
0

Ajaxを使用してみてください。iframeを使用している場合と同じように、含まれている各コンテンツを個別にロードできることを確認してください。

コンテンツコンテナを作成してから、Jqueryajaxを使用します

$.ajax({
  url: 'targethtml.html',
  success: function(data) {
    $('#containerid').html(data);
  }
});

それだ。

于 2012-08-24T20:52:20.673 に答える