PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 ),
PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 ),
<span>/*</span><span> ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8<br /> ******* 其它组件:jQuery-1.8.3.min.js + Smarty 3.1.18 + TinyMCE 4.1.6 ******* Date:2014-10-20 ******* Author:小dee ******* Blog:http://www.cnblogs.com/dee0912/ </span><span>*/</span>
写在前面的:
1.不论是列表分页还是文章分页,关键的地方在于如何处理当前页之前和之后的偏移量,也就是要考虑 ( 不同情况下哪些页码元素该显示,哪些不该显示 ) 和计算 ( 显示多少页码 ) ,这些关键的方法在 url 分页时写入分页类文件中,在 ajax 分页中写入 js 文件中;
2.在 ajax 分页时,使用 live() 方法可以使 jQuery动态添加的元素也能绑定事件处理函数 ( ajax_arc.js 文件 )
这个功能模块的主要文件包括长文章分页类 arc_page.class.php 和 用于 ajax 文章分页的 ajax_arc.js 两个文件,包含的功能有:
1.文章内容可以使用 url 分页,分页后的 url 参数为 p;
2.文章内容可以使用 ajax 分页,显示页码;
3.和列表分页类一样,可以更改"上一页"、"下一页"文字
其他:这个模块的分页功能为 编辑器手动插入分页符 进行分页。
这个模块配合使用了 TinyMCE ( 4.1.6 ) 编辑器
TinyMCE编辑器下载地址:http://www.tinymce.com/download/download.php,解压后文件夹 tinymce 放至根目录;
语言包下载地址:http://www.tinymce.com/i18n/index.php,选择 Chinese (China) ,解压后把 langs 文件夹里的 zh_CN.js 放至 tinymce/langs 目录下;
在模板里引入 tinymce/tinymce.min.js 文件;
其他使用方法可以参照博客:http://www.cnblogs.com/nkxyf/p/3883586.html
效果图:
url 分页
图1.
图2.
图3.
ajax 分页
图1.
图2.
模块文件结构图:
ROOT:
├─conn
│ └─conn.php
│
├─libs -- smarty库
│
├─templates
│ │
│ ├─add_article.html -- 添加文章模板
│ ├─view_article.html -- 前台文章页模板
│ ├─list.html -- 前台列表页模板
│ ├─success.html -- 操作成功时显示模板
│ ├─error.html -- 操作失败时显示模板
│ │
│ ├─css
│ │
│ ├─images
│ │ └─loading.gif -- ajax分页时请求数据接收到之前的加载图
│ │
│ └─js
│ │
│ ├─jquery-1.8.3.min.js
│ │
│ ├─showTime.js -- 操作成功或失败时的倒计时跳转文件
│ │
│ ├─ajax_arc.js -- 当分页方式为ajax时文章页模板view_article.html加载的js
│ │
│ └─ajax.js -- 当分页方式为ajax时列表页模板list.html加载的js
│
├─templates_c
│
├─tinymce -- 编辑器
│
├─init.inc.php -- smarty配置文件
│
├─list_page.class.php -- 列表分页类
│
├─arc_page.class.php -- 文章分页类
│
├─list.php -- 列表页
│
├─view_article.php -- 文章页
│
├─ajaxarc.php -- 文章页ajax分页时接受请求的php文件
│
├─ajaxpage.php -- 列表页ajax分页时接受请求的php文件
│
└─ins.php -- 添加文章php文件
主要代码:
添加文章( templates/add_article.html , add_article.php , ins.php )
templates/add_article.html
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>PHP文章分页类title> 6 <link href="<{$Template_Dir}>/css/style_control.css" rel="stylesheet" type="text/css"> 7 <script src="<{$Template_Dir}>/js/jquery-1.8.3.min.js">script> 8 9 10 <script src="<{$ROOT_URL}>tinymce/tinymce.min.js">script> 11 <script> 12 13 tinymce.init({ 14 15 selector:'#content', //编辑区域 16 theme: "modern", //主题 17 language: "zh_cn", //语言(中文需要到官网下载) 18 19 width:800, //编辑框宽 20 height: 300, //编辑框高 21 22 plugins: [ 23 24 "advlist autolink lists link image charmap print preview hr anchor pagebreak", 25 "searchreplace wordcount visualblocks visualchars code fullscreen", 26 "insertdatetime media nonbreaking save table contextmenu directionality", 27 "emoticons template paste textcolor colorpicker textpattern" 28 ], 29 30 //第一行工具栏 31 toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 32 33 //第二行工具栏 34 toolbar2: "print preview media | forecolor backcolor emoticons", 35 36 image_advtab: true, 37 38 //初始时提供的默认格式 39 style_formats: [ 40 {title: 'Bold text', inline: 'b'}, 41 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, 42 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, 43 {title: 'Example 1', inline: 'span', classes: 'example1'}, 44 {title: 'Example 2', inline: 'span', classes: 'example2'}, 45 {title: 'Table styles'}, 46 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} 47 ] 48 }); 49 50 script> 51 head> 52 <body> 53 54 <form id="arc_form" action="ins.php" method="post"> 55 56 标题:<br /> 57 <input type="text" id="title" name="title" autocomplete="off" /><br /><br /> 58 内容:<br /> 59 <textarea id="content" name="content">textarea><br /> 60 <input type="button" id="sub" value="提交" /> 61 62 form> 63 64 body> 65 <script> 66 67 $(function(){ 68 69 $("#sub").click(function(){ 70 71 if($("#title").val() != ""){ 72 73 $("#arc_form").submit(); 74 }else{ 75 76 alert("标题不能为空"); 77 } 78 }); 79 }); 80 script> 81 html> View Code
前台显示如图:
add_article.php
1 php 2 3 require 'init.inc.php'; 4 5 $smarty->assign("ROOT",ROOT); 6 $smarty->assign("ROOT_URL",ROOT_URL); 7 $smarty->assign("Template_Dir",Template_Dir); 8 9 $smarty->display("add_article.html"); View Code
ins.php
1 php 2 3 require 'conn/conn.php'; 4 require 'init.inc.php'; 5 6 if(isset($_POST['title']) && !empty($_POST['title'])){ 7 8 if(get_magic_quotes_gpc()){ 9 10 $title = trim($_POST['title']); 11 12 }else{ 13 14 $title = addslashes(trim($_POST['title'])); 15 } 16 } 17 18 if(isset($_POST['content']) && !empty($_POST['content'])){ 19 20 $content = htmlspecialchars($_POST['content']); 21 } 22 23 function check_input($value){ 24 25 // 如果不是数字则加引号 26 if (!is_numeric($value)){ 27 28 $value = mysql_real_escape_string($value); 29 } 30 return $value; 31 } 32 33 $title = check_input($title); 34 35 36 //插入数据 37 $sql = "insert into archives (title,content,pubdate)values('".$title."','".$content."','".time()."')"; 38 39 40 if($conne->uidRst($sql) == 1){ 41 42 //当前时间存入session 43 $_SESSION['t'] = $t; 44 45 $smarty->assign("Template_Dir",Template_Dir); 46 $smarty->assign("ROOT_URL",$ROOT_URL); 47 48 //跳转参数 49 $smarty->assign("do","添加"); 50 $smarty->assign("addr","列表页"); 51 $smarty->assign("url","list.php"); 52 53 $smarty->display("success.html"); 54 }else{ 55 56 $smarty->assign("Template_Dir",Template_Dir); 57 $smarty->assign("ROOT_URL",$ROOT_URL); 58 59 //跳转参数 60 $smarty->assign("do","添加"); 61 $smarty->assign("addr","添加页"); 62 $smarty->assign("url","add_article.php"); 63 64 $smarty->display("error.html"); 65 } View Code把输入的文章内容使用htmlspecialchars()存入数据库。TinyMCE编辑器会自动把用户输入的内容前后加上
标签,不只是文字,也包括图片、视频等富媒体,如:图片:
视频:
分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )
arc_page.class.php
1 php 2 3 class MyArcPage{ 4 5 private $content; 6 private $pagebreak; 7 private $url; //当前出去参数p的url 8 9 //页码显示 10 private $prePage; //页码前偏移量 11 private $floPage; //页码后偏移量 12 private $pageNow; //当前页码 13 private $totalPage; 14 15 private $page_act; //翻页样式 0:url 1:ajax 16 17 //页码文字 18 private $firstFonts = "首页"; 19 private $lastFonts = "末页"; 20 21 private $nextFonts = "下一页 >"; 22 private $preFonts = "< 上一页"; 23 24 //显示页码 25 private $pageShow = ""; 26 27 28 //参数:文章内容,分页符的html代码,分页方式,当前url的p参数 29 function __construct($content,$pagebreak,$page_act,$p,$prePage,$floPage){ 30 31 $this->content = $content; 32 $this->pagebreak = $pagebreak; 33 $this->floPage = $floPage; 34 $this->prePage = $prePage; 35 36 $this->page_act = $page_act; 37 38 $this->p = $p; 39 } 40 41 /**************************检测是否含有分页符***********************/ 42 public function check(){ 43 44 //检测是否含有分页符 45 if(strpos($this->content,$this->pagebreak) === false){ 46 47 //不含有分页符 48 return $this->content; 49 }else{ 50 51 //含有分页符 52 $contentArr = explode($this->pagebreak,$this->content); 53 return $contentArr; 54 } 55 } 56 57 /************获得当前页页码,接收$_GET['p']*******/ 58 public function getPageNow(){ 59 60 if(!isset($this->p)){ 61 62 $this->pageNow = 1; 63 }else if($this->p>0){ 64 65 $this->pageNow = $this->p; 66 }else{ 67 68 die("page number error"); 69 } 70 71 return $this->pageNow; 72 } 73 74 /**************************设置当前页面链接**************************/ 75 public function getUrl(){ 76 77 $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 78 79 //判断是否带参数 80 if(strpos($url,"?") === false){ //不带参数 81 82 return $this->url = $url."?"; 83 }else{ //带参数 84 85 $url = explode("?",$url); 86 //参数 87 $param = $url[1]; 88 89 //判断是否有多个参数 90 if(strpos($param,"&") === false){ //只有一个参数 91 92 //判断参数是否为p 93 if(strpos($param,"p=") === false){ //不含参数p 94 95 //合并url 96 $url = implode("?",$url); 97 98 return $this->url = $url."&"; 99 100 }else{ 101 102 //把参数p去掉 103 $url = $url[0]; 104 105 return $this->url = $url."?"; 106 } 107 108 }else{ //多个参数 109 110 $param = explode("&",$param); 111 112 //遍历参数数组 113 foreach($param as $k=>$v){ 114 115 if(strpos($v,"p=") === false){ 116 117 continue; 118 }else{ 119 120 //当含有参数p时,把它从数组中删除 121 unset($param[$k]); 122 } 123 } 124 125 //删除参数p之后组合数组 126 $param = implode("&",$param); 127 $url[1] = $param; 128 $url = implode("?",$url); 129 130 return $this->url = $url."&"; 131 } 132 } 133 } 134 135 /****************************前偏移量处理***************************/ 136 public function preOffset($preFonts){ 137 138 $this->getPageNow(); 139 $this->getUrl(); 140 $this->getPreFonts($preFonts); 141 142 //前偏移量的处理 143 if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){ 144 145 //上一页 146 $this->pageShow .= "$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts).""; 147 148 149 //页码 150 for($i=1;$i<=$this->pageNow-1;$i++){ 151 152 //ajax方式不显示 153 //if($this->page_act != 1){ 154 155 $this->pageShow .= "$this->url."p=".$i."\">".$i.""; 156 //} 157 } 158 159 }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow至少大于2时才会出现"1..." 160 161 //首页 162 $this->pageShow .= "$this->url."p=1\">".$this->firstFonts.""; 163 164 //上一页 165 $this->pageShow .= "$this->url."p=".($this->pageNow-1)."\">".($preFonts == ""?$this->preFonts:$preFonts).""; 166 167 for($i=$this->prePage;$i>=1;$i--){ 168 169 //当前页和'...'之间的页码,ajax方式不显示 170 //if($this->page_act != 1){ 171 172 $this->pageShow .= "$this->url."p=".($this->pageNow-$i)."\">".($this->pageNow-$i).""; 173 //} 174 } 175 } 176 } 177 178 /**********************页码和后偏移量处理***************************/ 179 public function floOffset($nextFonts){ 180 181 $this->getPageNow(); 182 $this->getTotalPage(); 183 $this->getUrl(); 184 $this->getNextFonts($nextFonts); 185 186 if($this->totalPage > $this->floPage){ //总页数大于后偏移量时 187 188 for($i=0;$i<=$this->floPage;$i++){ 189 190 $page = $this->pageNow+$i; 191 192 if($page<=$this->totalPage){ 193 194 //页码,ajax方式不显示 195 //if($this->page_act != 1){ 196 197 $this->pageShow .= "$this->url."p=".$page."\">".$page.""; 198 //} 199 } 200 } 201 202 if($this->pageNow < $this->totalPage){ 203 204 $this->pageShow .= "$this->url."p=".($this->pageNow+1)."\">".($nextFonts == ""?$this->nextFonts:$nextFonts).""; //当实例化对象时用户传递的文字为空时则调用类预设的"下一页",否则输出用户传递的值 205 206 if(($this->pageNow+$this->floPage+1)<$this->totalPage){ 207 208 $this->pageShow .= "$this->url."p=".$this->totalPage."\">末页"; 209 } 210 211 }else if($this->pageNow > $this->totalPage){ 212 213 die("超出页码范围"); 214 } 215 }else{ //总页数小于后偏移量时 216 217 if($this->pageNow < $this->totalPage){ //当前页小于总页数时 218 219 for($i=0;$i<$this->totalPage;$i++){ 220 221 $page = $this->pageNow+$i; 222 223 if($page < $this->totalPage){ 224 225 //if($this->page_act != 1){ 226 227 //页码后边界 228 $this->pageShow .= "$this->url."p=".$page."\">".$page.""; 229 //} 230 231 }else if($page == $this->totalPage){ 232 233 //if($this->page_act != 1){ 234 235 $this->pageShow .= "$this->url."p=".$page."\">".$page.""; 236 //} 237 }else if($this->pageNow > $this->totalPage){ 238 239 die("超出页码范围"); 240 } 241 } 242 243 $this->pageShow .= "$this->url."p=".($this->pageNow+1)."\">".$this->nextFonts.""; 244 }else if($this->pageNow > $this->totalPage){ 245 246 die("超出页码范围"); 247 }else{ //当前页等于总页数 248 249 //if($this->page_act != 1){ 250 251 $this->pageShow .= "$this->url."p=".$this->totalPage."\">".$this->totalPage.""; 252 //} 253 } 254 } 255 } 256 257 /********************其它页面信息***********************/ 258 public function getOtherInfo(){ 259 260 $this->pageShow .= " 当前第".$this->pageNow."页"; 261 $this->pageShow .= "/共".$this->totalPage."页"; 262 263 return $this->pageShow; 264 } 265 266 /* ********************获取上一页、下一页文字******************* */ 267 public function getPreFonts($preFonts){ 268 269 return $this->preFonts = ($preFonts=="")?$this->preFonts:$preFonts; 270 } 271 272 public function getNextFonts($nextFonts){ 273 274 return $this->nextFonts = ($nextFonts=="")?$this->nextFonts:$nextFonts; 275 } 276 277 278 279 /******************************获得总页数页**********************************/ 280 public function getTotalPage(){ 281 282 //检测content是否为数组 283 if(is_array($this->check())){ //content含分页符才分页 284 285 //总页数 286 return $this->totalPage = count($this->check()); 287 }else{ 288 289 return $this->totalPage = 1; 290 } 291 } 292 293 /*********************************分页***************************************/ 294 public function page(){ 295 296 //文章分页一般不多,所以只是用list_page.class.php中的style2作为分页样式 297 //返回页码 298 return $this->preOffset($preFonts,$this->prePage).$this->floOffset($nextFonts,$this->floPage).$this->getOtherInfo(); 299 } 300 } View Code在这个文件中包含检测是否含有分页符的方法,如果包含分页符,则把传入的内容按照分页符拆分,返回数组,否则返回字符串。
templates/js/ajax_arc.js
1 $(function(){ 2 3 //初始显示"下一页","末页" 4 showFloPage(); 5 6 //删除原先的li,插入gif 7 function ajaxpre(){ 8 9 //插入gif图 10 $loading = $("

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

報錯的原因NameResolutionError(self.host,self,e)frome是由urllib3函式庫中的例外類型,這個錯誤的原因是DNS解析失敗,也就是說,試圖解析的主機名稱或IP位址無法找到。這可能是由於輸入的URL位址不正確,或DNS伺服器暫時無法使用所導致的。如何解決解決此錯誤的方法可能有以下幾種:檢查輸入的URL地址是否正確,確保它是可訪問的確保DNS伺服器可用,您可以嘗試在命令行中使用"ping"命令來測試DNS伺服器是否可用嘗試使用IP位址而不是主機名稱來存取網站如果是在代理

一、今日頭條發布文章怎麼有收益?今日頭條發布文章獲得更多收益方法! 1.開通基礎權益:原創文章選擇投放廣告可獲得收益,影片必須原創橫屏才會有收益。 2.開通百粉權益:粉絲量達百粉以上,微頭條、原創問答創作及問答均可獲得收益。 3.堅持原創作品:原創作品包含文章、微標題及問題等,要求300字以上。注意違規抄襲作品作為原創發布,會被扣信用分,即使有收益也會被扣除。 4.垂直度:做專業領域一類的文章,不能隨意跨領域寫文章,會得不到合適的推薦,達不到作品的專和精,難以吸引粉絲讀者。 5.活躍度:活躍度高,

區別:1、定義不同,url是是統一資源定位符,而html是超文本標記語言;2、一個html中可以有很多個url,而一個url中只能存在一個html頁面;3、html指的是網頁,而url指的是網站位址。

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

使用Ajax從PHP方法取得變數是Web開發中常見的場景,透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中,將介紹如何使用Ajax從PHP方法中取得變量,並提供具體的程式碼範例。首先,我們需要寫一個PHP檔案來處理Ajax請求,並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼:

PHP陣列分頁有兩種最常見的方式:使用array_slice()函數:計算要跳過的元素數量,然後提取指定範圍的元素。使用內建迭代器:實作Iterator接口,rewind()、key()、current()、next()和valid()方法用於遍歷指定範圍內的元素。

Ajax(非同步JavaScript和XML)允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax,您可以動態載入產品清單:HTML建立一個帶有容器元素的頁面,Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求,從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據,並將其編碼為JSON格式。 JavaScript解析JSON數據,並將其顯示在頁面容器中。點選按鈕觸發Ajax請求,載入產品清單。

為了提升Ajax安全性,有幾種方法:CSRF保護:產生令牌並將其傳送到客戶端,在請求中新增至伺服器端進行驗證。 XSS保護:使用htmlspecialchars()過濾輸入,防止惡意腳本注入。 Content-Security-Policy頭:限制惡意資源加載,指定允許載入腳本和樣式表的來源。驗證伺服器端輸入:驗證從Ajax請求接收的輸入,防止攻擊者利用輸入漏洞。使用安全Ajax函式庫:利用jQuery等函式庫提供的自動CSRF保護模組。
