jquery ajax php+mysql 无刷新分页 详细实例_PHP教程
最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清晰，话不多说，直接上代码吧。
首先是html页面，index.html，代码如下：
<span 1</span> <span <!</span><span DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span ></span>
<span 2</span> <span <</span><span html </span><span xmlns</span><span ="http://www.w3.org/1999/xhtml"</span><span ></span>
<span 3</span> <span <</span><span head</span><span ></span>
<span 4</span> <span <</span><span meta </span><span http-equiv</span><span ="Content-Type"</span><span content</span><span ="text/html; charset=utf-8"</span> <span /></span>
<span 5</span> <span <</span><span title</span><span ></span>php+mysql+ajax+jquery分页<span </</span><span title</span><span ></span>
<span 6</span>
<span 7</span> <span <</span><span script </span><span type</span><span ="text/javascript"</span><span src</span><span ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</span><span ></</span><span script</span><span ></span>
<span 8</span> <span <</span><span script </span><span type</span><span ="text/javascript"</span><span src</span><span ="ajaxPager.js"</span><span ></</span><span script</span><span ></span>
<span 9</span> <span <</span><span style</span><span ></span>
<span 10</span> <span #main</span><span {</span>
<span 11</span> <span width</span><span :</span><span 980px</span><span ;</span>
<span 12</span> <span margin</span><span :</span><span 0px auto</span><span ;</span>
<span 13</span> <span }</span>
<span 14</span> <span ul
</span><span 15</span> <span {</span>
<span 16</span> <span list-style</span><span :</span><span none</span><span ;</span>
<span 17</span> <span margin</span><span :</span><span 0px</span><span ;</span>
<span 18</span> <span }</span>
<span 19</span> <span #list li</span><span {</span>
<span 20</span> <span width</span><span :</span><span 220px</span><span ;</span>
<span 21</span> <span height</span><span :</span><span 280px</span><span ;</span>
<span 22</span> <span float</span><span :</span><span left</span><span ;</span>
<span 23</span> <span margin-left</span><span :</span><span 10px</span><span ;</span>
<span 24</span> <span }</span>
<span 25</span> <span .pager .cur </span><span {</span>
<span 26</span> <span border-top-color</span><span :</span><span rgb(255, 255, 255)</span><span ;</span>
<span 27</span> <span border</span><span :</span><span 1px solid #fff</span><span ;</span>
<span 28</span> <span background</span><span :</span><span 0</span><span ;</span>
<span 29</span> <span font-weight</span><span :</span><span bold</span><span ;</span>
<span 30</span> <span color</span><span :</span><span #000</span><span ;</span>
<span 31</span> <span }</span>
<span 32</span> <span .pager a, .pager span </span><span {</span>
<span 33</span> <span margin-top</span><span :</span><span 5px</span><span ;</span>
<span 34</span> <span }</span>
<span 35</span> <span .pager a, .pager span </span><span {</span>
<span 36</span> <span background</span><span :</span><span none repeat scroll 0 0 #fff</span><span ;</span>
<span 37</span> <span border</span><span :</span><span 1px solid #e7ecf0</span><span ;</span>
<span 38</span> <span color</span><span :</span><span #0000cd</span><span ;</span>
<span 39</span> <span float</span><span :</span><span left</span><span ;</span>
<span 40</span> <span height</span><span :</span><span 22px</span><span ;</span>
<span 41</span> <span line-height</span><span :</span><span 22px</span><span ;</span>
<span 42</span> <span margin-right</span><span :</span><span 5px</span><span ;</span>
<span 43</span> <span overflow</span><span :</span><span hidden</span><span ;</span>
<span 44</span> <span text-align</span><span :</span><span center</span><span ;</span>
<span 45</span> <span text-decoration</span><span :</span><span none</span><span ;</span>
<span 46</span> <span width</span><span :</span><span auto</span><span ;</span>
<span 47</span> <span padding</span><span :</span><span 0 8px</span><span ;</span>
<span 48</span> <span }</span>
<span 49</span> <span .pager span </span><span {</span>
<span 50</span> <span background</span><span :</span><span none repeat scroll 0 0 #fff</span><span ;</span>
<span 51</span> <span border</span><span :</span><span 1px solid #e7ecf0</span><span ;</span>
<span 52</span> <span color</span><span :</span><span #0000cd</span><span ;</span>
<span 53</span> <span float</span><span :</span><span left</span><span ;</span>
<span 54</span> <span height</span><span :</span><span 22px</span><span ;</span>
<span 55</span> <span line-height</span><span :</span><span 22px</span><span ;</span>
<span 56</span> <span margin-right</span><span :</span><span 5px</span><span ;</span>
<span 57</span> <span overflow</span><span :</span><span hidden</span><span ;</span>
<span 58</span> <span text-align</span><span :</span><span center</span><span ;</span>
<span 59</span> <span text-decoration</span><span :</span><span none</span><span ;</span>
<span 60</span> <span width</span><span :</span><span auto</span><span ;</span>
<span 61</span> <span padding</span><span :</span><span 0 8px</span><span ;</span>
<span 62</span> <span }</span>
<span 63</span> <span .pager </span><span {</span>
<span 64</span> <span border-top</span><span :</span><span 0</span><span ;</span>
<span 65</span> <span padding</span><span :</span><span 12px 0 30px 15px</span><span ;</span>
<span 66</span> <span float</span><span :</span><span left</span><span ;</span>
<span 67</span> <span }</span>
<span 68</span> <span .clearfix </span><span {</span>
<span 69</span> <span display</span><span :</span><span block</span><span ;</span>
<span 70</span> <span }</span>
<span 71</span> <span .pager </span><span {</span>
<span 72</span> <span float</span><span :</span><span left</span><span ;</span>
<span 73</span> <span font-family</span><span :</span><span Arial</span><span ;</span>
<span 74</span> <span font-size</span><span :</span><span 13px</span><span ;</span>
<span 75</span> <span }</span>
<span 76</span> <span .clearfix </span><span {</span>
<span 77</span> <span zoom</span><span :</span><span 1</span><span ;</span>
<span 78</span> <span }</span>
<span 79</span> <span </</span><span style</span><span ></span>
<span 80</span>
<span 81</span>
<span 82</span> <span </</span><span head</span><span ></span>
<span 83</span>
<span 84</span> <span <</span><span body</span><span ></span>
<span 85</span>
<span 86</span>
<span 87</span> <span <</span><span div </span><span id</span><span ="main"</span><span ></span>
<span 88</span> <span <</span><span div </span><span id</span><span ="pagecount"</span><span class</span><span ="pager clearfix"</span><span ></</span><span div</span><span ><</span><span div </span><span id</span><span ="loading"</span><span ></</span><span div</span><span ></span>
<span 89</span> <span <</span><span br </span><span /></span>
<span 90</span> <span <</span><span br </span><span /></span>
<span 91</span> <span <</span><span br </span><span /></span>
<span 92</span> <span <</span><span br </span><span /></span>
<span 93</span> <span <</span><span div </span><span id</span><span ="list"</span><span ></span>
<span 94</span> <span <</span><span ul</span><span ></</span><span ul</span><span ></span>
<span 95</span> <span </</span><span div</span><span ></span>
<span 96</span> <span </</span><span div</span><span ></span>
<span 97</span> <span </</span><span body</span><span ></span>
<span 98</span> <span </</span><span html</span><span ></span>
样式我随便写的，毕竟我样式写的很差，大家可以自己换样式的。
然后就是js代码了，ajaxPager.js，代码如下：
<span 1</span> <span var</span> curPage = 1; <span //</span><span 当前页码</span>
<span 2</span> <span var</span><span total,pageSize,totalPage;
</span><span 3</span> <span //</span><span 获取数据</span>
<span 4</span> <span function</span><span getData(page){
</span><span 5</span> <span $.ajax({
</span><span 6</span> type: 'POST'<span ,
</span><span 7</span> url: 'pages.php'<span ,
</span><span 8</span> data: {'pageNum':page-1<span },
</span><span 9</span> dataType:'json'<span ,
</span><span 10</span> beforeSend:<span function</span><span (){
</span><span 11</span> $("#loading").html("<img id='loadin'g src='loading.gif' alt="jquery ajax php+mysql 无刷新分页 详细实例_PHP教程" >"<span );
</span><span 12</span> <span },
</span><span 13</span> success:<span function</span><span (json){
</span><span 14</span> $("#loading").html(""<span );
</span><span 15</span> $("#list ul"<span ).empty();
</span><span 16</span> total = json.total; <span //</span><span 总记录数</span>
<span 17</span> pageSize = json.pageSize; <span //</span><span 每页显示条数</span>
<span 18</span> curPage = page; <span //</span><span 当前页</span>
<span 19</span> totalPage = json.totalPage; <span //</span><span 总页数</span>
<span 20</span> <span var</span> li = ""<span ;
</span><span 21</span> <span var</span> list =<span json.list;
</span><span 22</span> $.each(list,<span function</span>(index,array){ <span //</span><span 遍历json数据列</span>
<span 23</span> li += "<li><a href='#'><img src='"+array['pic']+"' alt="jquery ajax php+mysql 无刷新分页 详细实例_PHP教程" ></a><p>"+array['title'].substring(0,10)+"</p></li>"<span ;
</span><span 24</span> <span });
</span><span 25</span> $("#list ul"<span ).append(li);
</span><span 26</span> <span },
</span><span 27</span> complete:<span function</span>(){ <span //</span><span 生成分页条</span>
<span 28</span> <span getPageBar();
</span><span 29</span> <span },
</span><span 30</span> error:<span function</span><span (){
</span><span 31</span> alert("数据加载失败"<span );
</span><span 32</span> <span }
</span><span 33</span> <span });
</span><span 34</span> <span }
</span><span 35</span>
<span 36</span> <span //</span><span 获取分页条</span>
<span 37</span> <span function</span><span getPageBar(){
</span><span 38</span> <span //</span><span 页码大于最大页数</span>
<span 39</span> <span if</span>(curPage>totalPage) curPage=<span totalPage;
</span><span 40</span> <span //</span><span 页码小于1</span>
<span 41</span> <span if</span>(curPage<1) curPage=1<span ;
</span><span 42</span> pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>"<span ;
</span><span 43</span>
<span 44</span> <span //</span><span 如果是第一页</span>
<span 45</span> <span if</span>(totalPage<=4<span )
</span><span 46</span> <span {
</span><span 47</span> <span if</span>(curPage==1<span ){
</span><span 48</span> pageStr += "<span class='cur'>1</span>"<span ;
</span><span 49</span> <span for</span>(<span var</span> i=2;i<=totalPage;i++<span )
</span><span 50</span> <span {
</span><span 51</span> pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span 52</span> <span }
</span><span 53</span> }<span else</span><span {
</span><span 54</span> pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"<span ;
</span><span 55</span> <span for</span>(<span var</span> i=1;i<=totalPage;i++<span )
</span><span 56</span> <span {
</span><span 57</span> <span if</span>(i==<span curPage)
</span><span 58</span> <span {
</span><span 59</span> pageStr += "<span class='cur'>"+i+"</span>"
<span 60</span> <span }
</span><span 61</span> <span else</span>
<span 62</span> <span {
</span><span 63</span> pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span 64</span> <span }
</span><span 65</span> <span }
</span><span 66</span>
<span 67</span> <span }
</span><span 68</span> <span }
</span><span 69</span> <span else</span><span //</span><span 当页数大于5的时候就要这样显示1 2 3 4 ...</span>
<span 70</span> <span {
</span><span 71</span> <span if</span>(curPage<=3<span ){
</span><span 72</span> <span if</span>(curPage==1<span )
</span><span 73</span> <span {
</span><span 74</span> pageStr += "<span class='cur'>1</span>"<span ;
</span><span 75</span> <span }
</span><span 76</span> <span else</span>
<span 77</span> <span {
</span><span 78</span> pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"<span ;
</span><span 79</span> pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>"<span ;
</span><span 80</span> <span }
</span><span 81</span> <span for</span>(<span var</span> i=2;i<=4;i++<span )
</span><span 82</span> <span {
</span><span 83</span> <span if</span>(i==<span curPage)
</span><span 84</span> <span {
</span><span 85</span> pageStr += "<span class='cur'>"+i+"</span>"
<span 86</span> <span }
</span><span 87</span> <span else</span>
<span 88</span> <span {
</span><span 89</span> pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span 90</span> <span }
</span><span 91</span> <span }
</span><span 92</span> pageStr += "<span class='cur'>...</span>"<span ;
</span><span 93</span> }<span else</span><span {
</span><span 94</span> pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"<span ;
</span><span 95</span> pageStr += "<span class='cur'>...</span>"<span ;
</span><span 96</span> <span if</span>(curPage>totalPage-2<span )
</span><span 97</span> <span {
</span><span 98</span> <span for</span>(<span var</span> i=totalPage-2;i<=totalPage;i++<span )
</span><span 99</span> <span {
</span><span 100</span> <span if</span>(i==<span curPage)
</span><span 101</span> <span {
</span><span 102</span> pageStr += "<span class='cur'>"+i+"</span>"
<span 103</span> <span }
</span><span 104</span> <span else</span>
<span 105</span> <span {
</span><span 106</span> pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span 107</span> <span }
</span><span 108</span> <span }
</span><span 109</span> <span }
</span><span 110</span> <span else</span>
<span 111</span> <span {
</span><span 112</span> pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>"<span ;
</span><span 113</span> pageStr += "<span class='cur'>"+curPage+"</span>"<span ;
</span><span 114</span> pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>"<span ;
</span><span 115</span> pageStr += "<span class='cur'>...</span>"<span ;
</span><span 116</span> <span }
</span><span 117</span> <span }
</span><span 118</span> <span }
</span><span 119</span> <span //</span><span 如果是最后页</span>
<span 120</span> <span if</span>(curPage>=<span totalPage){
</span><span 121</span> <span //</span><span pageStr += "<span>></span> <span>>></span>";</span>
<span 122</span> }<span else</span><span {
</span><span 123</span> pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>"<span ;
</span><span 124</span> <span }
</span><span 125</span>
<span 126</span> $("#pagecount"<span ).html(pageStr);
</span><span 127</span> <span }
</span><span 128</span>
<span 129</span> $(<span function</span><span (){
</span><span 130</span> getData(1<span );
</span><span 131</span> $("#pagecount a").live('click',<span function</span><span (){
</span><span 132</span> <span var</span> rel = $(<span this</span>).attr("rel"<span );
</span><span 133</span> <span if</span><span (rel){
</span><span 134</span> <span getData(rel);
</span><span 135</span> <span }
</span><span 136</span> <span });
</span><span 137</span> });
因为项目的需要，我这个页面页数显示只能显示几页，比如就这样 << < ... 5 6 7 ... > >>，要改显示的，就在ajaxPager.js里面改。
$.ajax({ 中url: 'pages.php'，处理就在pages.php中处理。那么就来看看pages.php中的代码：
<span 1</span> <?<span php
</span><span 2</span> <span include_once</span>('connect.php'<span );
</span><span 3</span>
<span 4</span> <span $page</span> = <span intval</span>(<span $_POST</span>['pageNum'<span ]);
</span><span 5</span>
<span 6</span> <span $result</span> = <span mysql_query</span>("select id from food"<span );
</span><span 7</span> <span $total</span> = <span mysql_num_rows</span>(<span $result</span>);<span //</span><span 总记录数</span>
<span 8</span>
<span 9</span> <span $pageSize</span> = 8; <span //</span><span 每页显示数</span>
<span 10</span> <span $totalPage</span> = <span ceil</span>(<span $total</span>/<span $pageSize</span>); <span //</span><span 总页数</span>
<span 11</span>
<span 12</span> <span $startPage</span> = <span $page</span>*<span $pageSize</span><span ;
</span><span 13</span> <span $arr</span>['total'] = <span $total</span><span ;
</span><span 14</span> <span $arr</span>['pageSize'] = <span $pageSize</span><span ;
</span><span 15</span> <span $arr</span>['totalPage'] = <span $totalPage</span><span ;
</span><span 16</span> <span $query</span> = <span mysql_query</span>("select id,title,pic from food order by id asc limit <span $startPage</span>,<span $pageSize</span>"<span );
</span><span 17</span> <span while</span>(<span $row</span>=<span mysql_fetch_array</span>(<span $query</span><span )){
</span><span 18</span> <span $arr</span>['list'][] = <span array</span><span (
</span><span 19</span> 'id' => <span $row</span>['id'],
<span 20</span> 'title' => <span $row</span>['title'],
<span 21</span> 'pic' => <span $row</span>['pic'],
<span 22</span> <span );
</span><span 23</span> <span }
</span><span 24</span> <span //</span><span print_r($arr);</span>
<span 25</span> <span echo</span> json_encode(<span $arr</span><span );
</span><span 26</span> ?>
上面当然还有数据库连接了啦，这个应该很简单吧，还是贴出来connect.php：
<span 1</span> <?<span php
</span><span 2</span> <span include_once</span>('connect.php'<span );
</span><span 3</span>
<span 4</span> <span $page</span> = <span intval</span>(<span $_POST</span>['pageNum'<span ]);
</span><span 5</span>
<span 6</span> <span $result</span> = <span mysql_query</span>("select id from food"<span );
</span><span 7</span> <span $total</span> = <span mysql_num_rows</span>(<span $result</span>);<span //</span><span 总记录数</span>
<span 8</span>
<span 9</span> <span $pageSize</span> = 8; <span //</span><span 每页显示数</span>
<span 10</span> <span $totalPage</span> = <span ceil</span>(<span $total</span>/<span $pageSize</span>); <span //</span><span 总页数</span>
<span 11</span>
<span 12</span> <span $startPage</span> = <span $page</span>*<span $pageSize</span><span ;
</span><span 13</span> <span $arr</span>['total'] = <span $total</span><span ;
</span><span 14</span> <span $arr</span>['pageSize'] = <span $pageSize</span><span ;
</span><span 15</span> <span $arr</span>['totalPage'] = <span $totalPage</span><span ;
</span><span 16</span> <span $query</span> = <span mysql_query</span>("select id,title,pic from food order by id asc limit <span $startPage</span>,<span $pageSize</span>"<span );
</span><span 17</span> <span while</span>(<span $row</span>=<span mysql_fetch_array</span>(<span $query</span><span )){
</span><span 18</span> <span $arr</span>['list'][] = <span array</span><span (
</span><span 19</span> 'id' => <span $row</span>['id'],
<span 20</span> 'title' => <span $row</span>['title'],
<span 21</span> 'pic' => <span $row</span>['pic'],
<span 22</span> <span );
</span><span 23</span> <span }
</span><span 24</span> <span //</span><span print_r($arr);</span>
<span 25</span> <span echo</span> json_encode(<span $arr</span><span );
</span><span 26</span> ?>
然后就完成了，具体思路很清晰，点击页数的时候jquery获取rel中的页面值，传进去数据库获取相应数据展现在页面上。
然后还有数据库吧，我的表示这样的：
<span>1</span> <span>CREATE</span> <span>TABLE</span> <span>IF</span> <span>NOT</span> <span>EXISTS</span><span> `food` ( </span><span>2</span> `id` <span>int</span>(<span>11</span>) <span>NOT</span> <span>NULL</span><span> AUTO_INCREMENT, </span><span>3</span> `title` <span>varchar</span>(<span>100</span>) <span>NOT</span> <span>NULL</span><span>, </span><span>4</span> `pic` <span>varchar</span>(<span>255</span>) <span>NOT</span> <span>NULL</span><span>, </span><span>5</span> <span>PRIMARY</span> <span>KEY</span><span> (`id`) </span><span>6</span> ) ENGINE<span>=</span>MyISAM <span>DEFAULT</span> CHARSET<span>=</span>utf8 AUTO_INCREMENT<span>=</span><span>31</span> ;
我这边有一个demo，然后大家可以下载看看。多多指教。
http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
La touche d'actualisation F5 ne fonctionne pas sous Windows 11
Mar 14, 2024 pm 01:01 PM
La touche F5 ne fonctionne pas correctement sur votre PC Windows 11/10 ? La touche F5 est généralement utilisée pour actualiser le bureau ou l'explorateur ou recharger une page Web. Cependant, certains de nos lecteurs ont signalé que la touche F5 actualisait leur ordinateur et ne fonctionnait pas correctement. Comment activer l’actualisation F5 dans Windows 11 ? Pour actualiser votre PC Windows, appuyez simplement sur la touche F5. Sur certains ordinateurs portables ou de bureau, vous devrez peut-être appuyer sur la combinaison de touches Fn+F5 pour terminer l'opération d'actualisation. Pourquoi l’actualisation F5 ne fonctionne-t-elle pas ? Si l'appui sur la touche F5 ne parvient pas à actualiser votre ordinateur ou si vous rencontrez des problèmes sous Windows 11/10, cela peut être dû au verrouillage des touches de fonction. D'autres causes potentielles incluent le clavier ou la touche F5
Comment obtenir des variables de la méthode PHP en utilisant Ajax ?
Mar 09, 2024 pm 05:36 PM
L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique
Jun 02, 2024 pm 08:39 PM
Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
Meilleure façon d'implémenter la pagination de tableaux en PHP
May 04, 2024 pm 02:39 PM
Il existe deux manières les plus courantes de paginer des tableaux PHP : en utilisant la fonction array_slice() : calculez le nombre d'éléments à ignorer, puis extrayez la plage d'éléments spécifiée. Utilisez des itérateurs intégrés : implémentez l'interface Iterator et les méthodes rewind(), key(), current(), next() et valid() sont utilisées pour parcourir les éléments dans la plage spécifiée.
PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement
Jun 06, 2024 pm 01:12 PM
Ajax (Asynchronous JavaScript et XML) permet d'ajouter du contenu dynamique sans recharger la page. En utilisant PHP et Ajax, vous pouvez charger dynamiquement une liste de produits : HTML crée une page avec un élément conteneur et la requête Ajax ajoute les données à l'élément après l'avoir chargé. JavaScript utilise Ajax pour envoyer une requête au serveur via XMLHttpRequest afin d'obtenir des données produit au format JSON à partir du serveur. PHP utilise MySQL pour interroger les données produit de la base de données et les encoder au format JSON. JavaScript analyse les données JSON et les affiche dans le conteneur de pages. Cliquer sur le bouton déclenche une requête Ajax pour charger la liste de produits.
Comment savoir si un élément jQuery possède un attribut spécifique ?
Feb 29, 2024 am 09:03 AM
Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique
