jquery ajax php+mysql 无刷新分页 详细实例
ajax
jquery
php+mysql
쪽수 매기기
새로 고치다
그리고
예
최대
상세한
最近在接触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 无刷新分页 详细实例" >"<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 无刷新分页 详细实例" ></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
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
1 몇 주 전
By DDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7454
15
7454
15
Cakephp 튜토리얼
1375
52
1375
52
Steam의 계정 이름 형식은 무엇입니까?
77
11
77
11
Win11 활성화 키 영구
40
19
40
19
NYT 연결 힌트와 답변
14
9
14
9
Windows 11에서 F5 새로 고침 키가 작동하지 않습니다.
Mar 14, 2024 pm 01:01 PM
Windows 11/10 PC에서 F5 키가 제대로 작동하지 않나요? F5 키는 일반적으로 데스크탑이나 탐색기를 새로 고치거나 웹 페이지를 다시 로드하는 데 사용됩니다. 그러나 일부 독자들은 F5 키가 컴퓨터를 새로 고치고 제대로 작동하지 않는다고 보고했습니다. Windows 11에서 F5 새로 고침을 활성화하는 방법은 무엇입니까? Windows PC를 새로 고치려면 F5 키를 누르십시오. 일부 노트북이나 데스크탑에서는 새로 고침 작업을 완료하려면 Fn+F5 키 조합을 눌러야 할 수도 있습니다. F5 새로 고침이 작동하지 않는 이유는 무엇입니까? F5 키를 눌러도 컴퓨터가 새로 고쳐지지 않거나 Windows 11/10에서 문제가 발생하는 경우 기능 키가 잠겨 있기 때문일 수 있습니다. 다른 잠재적인 원인으로는 키보드 또는 F5 키가 있습니다.
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?
Mar 09, 2024 pm 05:36 PM
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
jQuery를 사용하여 모든 태그의 텍스트 내용 수정
Feb 28, 2024 pm 05:42 PM
제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.
PHP 및 Ajax: 자동 완성 제안 엔진 구축
Jun 02, 2024 pm 08:39 PM
PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.
PHP에서 배열 페이지 매김을 구현하는 가장 좋은 방법
May 04, 2024 pm 02:39 PM
PHP 배열을 페이지화하는 가장 일반적인 두 가지 방법은 array_slice() 함수를 사용하는 것입니다. 건너뛸 요소 수를 계산한 다음 지정된 요소 범위를 추출합니다. 내장 반복자 사용: Iterator 인터페이스를 구현하고 rewind(), key(), current(), next() 및 valid() 메서드를 사용하여 지정된 범위 내의 요소를 탐색합니다.
PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션
Jun 06, 2024 pm 01:12 PM
Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 컨테이너 요소가 있는 페이지를 생성하고 Ajax 요청은 로드한 후 요소에 데이터를 추가합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 얻습니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.
jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요?
Feb 29, 2024 am 09:03 AM
jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인
