更新せずに Ajax ページングを実装する方法

php中世界最好的语言
リリース: 2018-04-04 13:37:35
オリジナル
972 人が閲覧しました

今回は、リフレッシュせずに Ajax ページングを実装する方法を説明します。 リフレッシュせずに Ajax ページングを実装する場合の 注意事項 について説明します。実際のケースを見てみましょう。

ページング テクノロジの原理と実装に関する前の記事 - ページングを実装するための Java+Oracle コード (2) に続き、この記事では引き続きページング テクノロジを分析します。前回の記事ではページング テクノロジのコード実装について説明しましたが、この記事では引き続きページング テクノロジの効果制御について分析します。

前の記事では、コードを使用してページングを単純に実装しました。ただし、コード内のサーブレット リクエストを通じて結果セットが取得されるたびに、結果が表示されるために JSP ページにリダイレクトされ、クエリが表示されるたびにページが更新されることは誰もが知っています。結果セットをクエリして 3 番目のページを見ると、ページは「更新します」と表示されます。このページの効果は少し不快になるため、条件を使用して結果セットをクエリした後にどのページにアクセスしても、ページは更新されず、結果セットのみが変更されることを望みます。これを解決するには、誰もが簡単に Ajax を思い浮かべると思います。
はい、アヤックスに出てきてもらう必要があります。クエリ条件を通じて結果セットがクエリされた後、それ以降のページへのアクセスはすべて、非同期 Ajax を使用してサーブレットと対話し、結果がクエリされて Ajax に返されます。 Ajax が結果を返すため、ページは更新されず、更新不要のページング テクノロジが実装されています。
単純な非リフレッシュ ページングの実装を見てみましょう。コードは次のとおりです。



 
 
 
 JavaScript" src="../lib/jQuery/jquery.min.js" mce_src="lib/jquery/jquery.min.js">
 
 
 
 Pagination
 
   

  jQuery Pagination Plugin Demo  

 

 

 
 

  This content will be replaced when pagination inits.  

 

  

   Globally maximize granular "outside the box" thinking vis-a-vis    quality niches. Proactively formulate 24/7 results whereas 2.0    catalysts for change. Professionally implement 24/365 niches rather    than client-focused users.   

  

   Competently engineer high-payoff "outside the box" thinking through    cross functional benefits. Proactively transition intermandated    processes through open-source niches. Progressively engage    maintainable innovation and extensible interfaces.   

  

  

  

   Credibly fabricate e-business models for end-to-end niches.    Compellingly disseminate integrated e-markets without ubiquitous    services. Credibly create equity invested channels with    multidisciplinary human capital.   

  

   Interactively integrate competitive users rather than fully tested    infomediaries. Seamlessly initiate premium functionalities rather    than impactful architectures. Rapidiously leverage existing    resource-leveling processes via user-centric portals.   

  

  

  

   Monotonectally initiate unique e-services vis-a-vis client-centric    deliverables. Quickly impact parallel opportunities with B2B    bandwidth. Synergistically streamline client-focused    infrastructures rather than B2C e-commerce.   

  

   Phosfluorescently fabricate 24/365 e-business through 24/365 total    linkage. Completely facilitate high-quality systems without    stand-alone strategic theme areas.   

  

 

 
ログイン後にコピー
これは、JQuery+ jquery.pagination フレームワークを使用した、非常に単純な非リフレッシュ ページング実装です。現在、フレームワーク、特に Jquery の人気が高まっているため、開発にフレームワークを使用することは非常に有効です。上記のコード原則はコード内でコメントされています。Jquery の公式 Web サイトも参照してください。

これで、Ajax 非リフレッシュ ページング実装を開発できるようになりました。上記の原理に基づき、ページ番号が押されたことに応答するコード内のpageselectCallback()では、Ajaxを使用してデータベースに非同期にアクセスし、クリックされたページ番号を介して結果セットを取り出し、そのページに設定します。非同期的に行われるため、更新は完了できません。

ページ番号が押されたときの応答関数pageselectCallback()は次のように変更されます:

このようにして、結果を非同期で取得でき、showResponse関数を使用して結果を処理します:

function showResponse(request){
   var content = request;
   var root = content.documentElement;
   var responseNodes = root.getElementsByTagName("root");
   var itemList = new Array();
   var pageList=new Array();
   alert(responseNodes.length);
   if (responseNodes.length > 0) {
    var responseNode = responseNodes[0];
    var itemNodes = responseNode.getElementsByTagName("data");
    for (var i=0; i 0 && nameNodes.length > 0&&sexNodes.length > 0&& ageNodes.length > 0) {
      var id=idNodes[0].firstChild.nodeValue;
      var name = nameNodes[0].firstChild.nodeValue;
      var sex = sexNodes[0].firstChild.nodeValue;
      var age=ageNodes[0].firstChild.nodeValue;
      itemList.push(new Array(id,name, sex,age));
     }
    }
    
    var pageNodes = responseNode.getElementsByTagName("pagination");
    if (pageNodes.length>0) {
     var totalNodes = pageNodes[0].getElementsByTagName("total");
     var startNodes = pageNodes[0].getElementsByTagName("start");
     var endNodes=pageNodes[0].getElementsByTagName("end");
     var currentNodes=pageNodes[0].getElementsByTagName("pageno");
     if (totalNodes.length > 0 && startNodes.length > 0&&endNodes.length > 0) {
      var total=totalNodes[0].firstChild.nodeValue;
      var start = startNodes[0].firstChild.nodeValue;
      var end = endNodes[0].firstChild.nodeValue;
      var current=currentNodes[0].firstChild.nodeValue;
      pageList.push(new Array(total,start,end,current));
     }
    }
   }
   showTable(itemList,pageList);
  }
ログイン後にコピー
上記のコードは、Ajaxによる非同期処理を処理するために使用されます。サーブレットをリクエストした後に返されるXML形式の結果。サーブレットのコードは前の記事にあります。このうち itemList と pageList は、それぞれ解析して返された後に生成されるユーザー リストとページング ナビゲーションであり、ユーザーが独自の方法でデータを表示できます。

function pageselectCallback(page_index, jq){
  var pars="pageNo="+(page_index+1);
   $.ajax({
    type: "POST",
   url: " UserBasicSearchServlet",
   cache: false,
   data: pars,
   success: showResponse
  });
    return false;
}
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

AjaxToolKit による評価コントロールの使用方法

jQuery+ajax による JSON データ トラバーサルの実装方法

以上が更新せずに Ajax ページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!