Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes

韦小宝

Dec 30, 2017 pm 08:12 PM

ajax 搜索结果 Benehmen

Dieser Artikel stellt hauptsächlich den vollständigen Code von Ajax in Kombination mit den Douban-Suchergebnissen für das Paging vor. Er hat einen gewissen Referenzwert für das Erlernen von Ajax. Freunde, die sich für Ajax interessieren, können sich auf

Verwenden der Douban-API beziehen , Erhalten Sie paginierte Ergebnisse. Entspricht den aus der Backend-Datenbank erhaltenen Ergebnissen. Der Unterschied besteht darin, dass es keine Möglichkeit gibt, die Anzahl der Seiten im Voraus zu kennen. Obwohl die Gesamtseitenzahl durch Anfordern der API ermittelt werden kann, ist es nicht sinnvoll, die Gesamtseitenzahl zu Beginn der Paginierung anzugeben, da Ajax asynchron ist. Ich habe eine feste Gesamtseitenzahl von 65 verwendet (genau die Gesamtzahl der Seiten, die bei der Suche nach Javascript-Büchern zurückgegeben werden). Daher sind andere Bücher nicht 65 Seiten lang. Dies ist kein Fehler.

Funktionen

1. Im gesamten Prozess muss das Backend nicht berührt werden, das Frontend kann unabhängig sein (ich habe nach einem vollständigen Beispiel gesucht). für eine lange Zeit).
　2. Verwenden Sie die Paginierung von bootstrap, um Seitenzahlen zu erstellen, und Panel, um ein Panel zum Platzieren von Ergebnissen zu erstellen.

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css" /><!-- 换成自己的目录 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  </head>
  <style>
   .pagination> li > a {
    cursor: pointer;
   }
   .pagination > li > span {
    margin-left: 0;
    color: #ccc;
    background-color: transparent;
    cursor: default;
   }
   .pagination > li > span:hover {
   color: #ccc;  
   background-color: transparent;
   cursor: default; 
   }
   .m20 {
    margin: 20px 0;
   }

  </style>
  <body>

   <p class="container-fluid">

    <p class="col-md-12">
     <p class="panel panel-default">
      <p class="panel-heading">
       <form class="input-group">
        <input type="text" value="javascript" class="form-control" id="bookName" placeholder="请输入书名" required="required"/>
        <span class="input-group-btn">
         <button class="btn" id="search">搜索</button>
        </span>
       </form>
      </p>
      <p class="panel-body">
       <table class="table table-bordered">
        <thead>
         <th>书名</th>
         <th>作者</th>
         <th>出版日期</th>
         <th>平均分</th>
         <th>价格</th>
        </thead>
        <tbody id="tbody">

        </tbody>
       </table>
      </p>
     </p>

    <p class="row">
     <p class="col-md-6">
      <p id="test"></p>
     </p>

     <p class="col-md-4">
      <p class="input-group m20"><!-- 保持与#test中的.pagination对齐 -->
       <input type="text" class="form-control" id="page"/>
       <span class="input-group-btn">
        <button class="btn btn-default" id="jumpToPage">GO</button>
       </span>
      </p>
     </p>
    </p>

    <p id="result" class="alert alert-info"></p>
    </p>
   </p>


 <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <!-- 换成自己的目录 -->
 <script type="text/javascript" src="js/bootstrap.js" ></script> <!-- 换成自己的目录 -->
 <script type="text/javascript">
  var partPageModule = ( function ( $ ) {
   var 
    initPager = null,// 初始换分页函数
    setPagerHTML = null,// 生成分的页HTML代码
    pageClick = null,//　每一页按钮的点击事件
    ajax = null, // ajax请求后台数据
    renderButton = null,
    $content = $( &#39;&#39; ) // 动态生成的页码
   ;


   /* 功能：完成初始化
    * @totalPages 总页数，从后端获取
    * @currentPage 当前所在的页数
    */
   initPager = function ( totalPages, currentPage ) {
    $content = setPagerHTML({
     currentPage: currentPage,
     totalPages: totalPages,
     pageClick: PageClick
    })
    $( &#39;#test&#39; ).empty().append( $content );// 得到分页后添加到#test
    $( &#39;#jumpToPage&#39; ).click( function ( e ) {// 绑定GO按钮的点击事件
     e.preventDefault();
     PageClick( totalPages, $(&#39;#page&#39;).val() * 1);
    })
    $( &#39;#page&#39; ).keyup( function ( e ) {// Enter键绑定搜索事件
     if ( e.keyCode === 13 ) {
      $( &#39;#jumpToPage&#39;).trigger( &#39;click&#39; );
     }
    })
    $( &#39;#result&#39; ).html( &#39;你点击的是第&#39; + currentPage + &#39;页&#39;)
   };

   /* 功能：页码点击事件。重新生成所有页码，并且使用ajax获取数据
    */
   PageClick = function ( totalPages, currentPage ) {
    initPager( totalPages, currentPage );
    ajax( currentPage );// 使用jsonp请求豆瓣
   }

   ajax = function ( currentPage ) {
    var 
     $input = $( &#39;#bookName&#39; ),
     bookName = &#39;&#39;,
     $tbody = $( &#39;#tbody&#39; )
//    totalPages
    ;

    bookName = $input.val();

    if ( !bookName ) { // 如果没有输入，就不要发送请求了
     $input.focus();
     return;
    } else {
     $.ajax({
      type: &#39;get&#39;,
      url: &#39;https://api.douban.com/v2/book/search&#39;,// 豆瓣图书api
      dataType: &#39;jsonp&#39;,
      data: {
       q: bookName,
       start: ( parseInt( currentPage )-1 )*20 || 0
      },
      success: function ( data ) {
       var 
        html = &#39;&#39;,
        books = data.books
       ;

//      totalPages = Math.ceil( data.total / data.count );

       books.forEach( function ( value, index ) {
        html += &#39;<tr>&#39;
           + &#39;<td><a href="&#39; + value.alt + &#39;">&#39; + value.title + &#39;</a></td>&#39;
           + &#39;<td>&#39; + value.author + &#39;</td>&#39;
           + &#39;<td>&#39; + value.pubdate + &#39;</td>&#39;
           + &#39;<td>&#39; + value.rating.average + &#39;</td>&#39;
           + &#39;<td>&#39; + value.price + &#39;</td>&#39;
           + &#39;</tr>&#39;; 
       })

       $tbody.html( html );
      }
     })
    }

//   return totalPages;
   }

   setPagerHTML = function ( options ) {
    var 
     currentPage = options.currentPage,
     totalPages = options.totalPages,
     pageClick = options.pageClick,
     $content = $(&#39;<ul class="pagination"></ul>&#39;),
     startPage = 1,
     nextPage = currentPage + 1,//不需要考虑超出问题，后面有条件
     prevPage = currentPage - 1
    ;

    /* 逻辑处理，根据点击的不同的页生成不同的ul */
    if ( currentPage == startPage ) {//当前页是起始页
     $content.append( &#39;<li><span>首页</span></li>&#39; ); // 首页不可用
     $content.append( &#39;<li><span>上一页</span></li>&#39; ); // 上一页不可用
    } else { // 不是起始页
     $content.append( renderButton( totalPages, 1, pageClick, &#39;首页&#39;) ); // 生成首页并绑定事件
     $content.append( renderButton( totalPages, prevPage, pageClick, &#39;上一页&#39;) ); // 生成上一页并绑定事件
    }

    if ( totalPages <=5 && currentPage <= 5 ) {// 总页数小于5，当前页小于5，全部生成页码
     for ( var i = 1; i <= totalPages; i++ ) {
      if( i === currentPage ) {
       $content.append( &#39;<li class="active><span>&#39; + i + &#39;</span></li>&#39; );// 当前页不可点击
      } else {
       $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击
      }
     }
    } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码
     $content.append( &#39;<li><span>...</span></li>&#39; );
     for( var i = totalPages - 4; i <= totalPages; i++ ) {
      if ( i === currentPage ) {
       $content.append( &#39;<li class="active"><span>&#39; + i + &#39;</span></li>&#39; );
      } else {
       $content.append( renderButton( totalPages, i, pageClick, i) );
      }
     }
    } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码
     $content.append( &#39;<li><span>...</span></li>&#39; );
     for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {
      if ( i === currentPage ) {
       $content.append( &#39;<li class="active"><span>&#39; + i + &#39;</span></li>&#39; );
      } else {
       $content.append( renderButton( totalPages, i ,pageClick, i) );
      }
     }
     $content.append( &#39;<li><span>...</span></li>&#39; );
    } else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示...
     for ( var i = 1; i <= 5; i++ ) {
      if ( i === currentPage ) {
       $content.append( &#39;<li class="active"><span>&#39; + i + &#39;</span></li>&#39; );
      } else {
       $content.append( renderButton( totalPages, i ,pageClick, i) );
      }
     }
     $content.append( &#39;<li><span>...</span></li>&#39; );
    }

    if ( currentPage == totalPages ) {//当前页是末页
     $content.append( &#39;<li><span>下一页</span></li>&#39; ); // 下一页不可用
     $content.append( &#39;<li><span>末页</span></li>&#39; ); // 末页不可用
    } else { // 不是起始页
     $content.append( renderButton( totalPages, nextPage, pageClick, &#39;下一页&#39;) ); // 生成首页并绑定事件
     $content.append( renderButton( totalPages, totalPages, pageClick, &#39;末页&#39;) ); // 生成上一页并绑定事件
    }

    return $content;
   }

   renderButton = function ( totalPages, goPageIndex, eventHander, text ) {
    var $gotoPage = $( &#39;<li><a title="第&#39; + goPageIndex + &#39;页">&#39; + text + &#39;</a></li>&#39; );
    $gotoPage.click( function () {
     eventHander( totalPages, goPageIndex );
    })

    return $gotoPage;
   }


   return {
    init: initPager,
    ajax: ajax
   }　
  }(jQuery))

  $( function () {


   $( &#39;#search&#39; ).click( function ( e ) {
    e.preventDefault();
    var totalPage = partPageModule.ajax(1);// 由于ajax是异步的，
    totalPage = totalPage || 65;// 所以这个总页数是不准确的。一般这个数据是后端返回的。这里的65是javascript搜索的页数，不同的书籍搜索结果不一样，由于ajax异步执行，所以这里会默认为65。这里不是bug。
    partPageModule.init( totalPage, 1 );
   })

   $( &#39;#bookName&#39; ).keyup( function ( e ) {
    if ( e.keyCode === 13 ) {
     $( &#39;#search&#39; ).trigger( &#39;click&#39; );
    }
   })

   $( &#39;#search&#39; ).trigger( &#39;click&#39; );
  })
 </script>
  </body>
</html>
<!-- https://api.douban.com/v2/book/search -->
<!--
 参数    意义        备注
 q    查询关键字      q和tag必传其一
 tag   查询的tag      q和tag必传其一
 start  取结果的offset   默认为0
 count  取结果的条数     默认为20，最大为100
-->

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt Ich hoffe, dass dieses Kapitel für alle hilfreich ist!

Verwandte Empfehlungen:

jQuery implementiert die Suchfunktion und zeigt suchbezogene Inhalte an

JS-Implementierung Statische Seitensuche und -hervorhebung

Implementierung eines JavaScript-imitierten Taobao-Suchfeld-Eingabeereignisses

Das obige ist der detaillierte Inhalt vonAjax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7530

CakePHP-Tutorial

1379

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt Feb 20, 2024 am 10:07 AM

Titel: Methoden und Codebeispiele zur Behebung von 403-Fehlern in jQuery-AJAX-Anfragen. Der 403-Fehler bezieht sich auf eine Anfrage, dass der Server den Zugriff auf eine Ressource verbietet. Dieser Fehler tritt normalerweise auf, weil der Anfrage die Berechtigungen fehlen oder sie vom Server abgelehnt wird. Wenn Sie jQueryAJAX-Anfragen stellen, stoßen Sie manchmal auf diese Situation. In diesem Artikel wird erläutert, wie dieses Problem gelöst werden kann, und es werden Codebeispiele bereitgestellt. Lösung: Berechtigungen prüfen: Stellen Sie zunächst sicher, dass die angeforderte URL-Adresse korrekt ist und stellen Sie sicher, dass Sie über ausreichende Berechtigungen für den Zugriff auf die Ressource verfügen.

So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage Feb 19, 2024 pm 05:55 PM

jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung der clientseitigen Entwicklung. AJAX ist eine Technologie, die asynchrone Anfragen sendet und mit dem Server interagiert, ohne die gesamte Webseite neu zu laden. Wenn Sie jedoch jQuery zum Senden von AJAX-Anfragen verwenden, treten manchmal 403-Fehler auf. Bei 403-Fehlern handelt es sich in der Regel um vom Server verweigerte Zugriffsfehler, möglicherweise aufgrund von Sicherheitsrichtlinien oder Berechtigungsproblemen. In diesem Artikel besprechen wir, wie Sie bei einer jQueryAJAX-Anfrage den Fehler 403 beheben können

Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Feb 23, 2024 pm 04:27 PM

Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Microsoft Bing nutzt künstliche Intelligenz, um Suchergebnistitel zu generieren und so die Sucheffizienz zu verbessern Nov 17, 2023 pm 06:53 PM

Microsofts Suchmaschine Bing kann nun mithilfe künstlicher Intelligenz Titel für bestimmte Suchergebnisse generieren. Diese Funktion nutzt die GPT-4-Technologie und zielt darauf ab, relevantere und informativere Suchergebnisse bereitzustellen, damit Benutzer die gewünschte Website schneller finden können. IT House hat festgestellt, dass der Benutzer nach einem bestimmten Schlüsselwort sucht und dann auf „Suchen“ klickt Über den Titellink in den Ergebnissen können Sie sehen, dass einige Ergebnisse mit „AI-GeneratedCaption“ gekennzeichnet sind. Bing sagt, dass es GPT-4 verwendet, um diese KI-Schlagzeilen zu generieren, indem es die Suchbegriffe der Benutzer analysiert und dann „die relevantesten Informationen aus der Webseite extrahiert und sie geschickt in hochrelevante und leicht verständliche Snippets umwandelt“, schreibt Bing. „Die generierten Tags

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit Jun 01, 2024 am 09:34 AM

Um die Ajax-Sicherheit zu verbessern, gibt es mehrere Methoden: CSRF-Schutz: Generieren Sie ein Token und senden Sie es an den Client. Fügen Sie es der Serverseite in der Anforderung zur Überprüfung hinzu. XSS-Schutz: Verwenden Sie htmlspecialchars(), um Eingaben zu filtern und das Einschleusen böswilliger Skripte zu verhindern. Content-Security-Policy-Header: Beschränken Sie das Laden schädlicher Ressourcen und geben Sie die Quellen an, aus denen Skripte und Stylesheets geladen werden dürfen. Validieren Sie serverseitige Eingaben: Validieren Sie von Ajax-Anfragen empfangene Eingaben, um zu verhindern, dass Angreifer Eingabeschwachstellen ausnutzen. Verwenden Sie sichere Ajax-Bibliotheken: Profitieren Sie von automatischen CSRF-Schutzmodulen, die von Bibliotheken wie jQuery bereitgestellt werden.

See all articles