Backend Development
PHP Tutorial
jquery ajax php+mysql no refresh paging detailed examples_PHP tutorial
jquery ajax php+mysql no refresh paging detailed examples_PHP tutorial
Recently I have been exposed to jquery and ajax. The current project will also use paging. In order to have a better user experience, I am going to use non-refresh paging. This demo is very suitable for novices to learn and view. The writing is clearer and the words are not easy to read. Say more, let’s go directly to the code.
First is the html page, index.html, the code is as follows:
<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>
I wrote the style casually. After all, my style writing is very poor. You can change the style yourself.
Then there is the js code, ajaxPager.js, the code is as follows:
<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'>"<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']+"'></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> });
Due to the needs of the project, the page number display on my page can only display a few pages. For example, it is like this << < ... 5 6 7 ... > Just change it in ajaxPager.js.
$.ajax({ url: 'pages.php', the processing is done in pages.php. Then let’s take a look at the code in 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> ?>
Of course there is a database connection above. This should be very simple, so I’d better post 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> ?>
Then it’s done. The specific idea is very clear. When you click on the page number, jquery gets the page value in rel and passes it into the database to get the corresponding data and displays it on the page.
Then there is the database, mine looks like this:
<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> ;
I have a demo here, and you can download it and take a look. Please give me some advice.
http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
F5 refresh key not working in Windows 11
Mar 14, 2024 pm 01:01 PM
Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
How to get variables from PHP method using Ajax?
Mar 09, 2024 pm 05:36 PM
Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
PHP vs. Ajax: Solutions for creating dynamically loaded content
Jun 06, 2024 pm 01:12 PM
Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element, and the Ajax request adds the data to that element after loading it. JavaScript uses Ajax to send a request to the server through XMLHttpRequest to obtain product data in JSON format from the server. PHP uses MySQL to query product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.
Best way to implement array pagination in PHP
May 04, 2024 pm 02:39 PM
There are two most common ways to paginate PHP arrays: using the array_slice() function: calculate the number of elements to skip, and then extract the specified range of elements. Use built-in iterators: implement the Iterator interface, and the rewind(), key(), current(), next(), and valid() methods are used to traverse elements within the specified range.
How to tell if a jQuery element has a specific attribute?
Feb 29, 2024 am 09:03 AM
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
