mayouarebest8621
mayouarebest8621

Ajax+Js+Dom+Json无刷新分页技术

终极分页：Ajax+Js+Dom+Json无刷新分页技术 采用了时下比较流行的Ajax无刷新技术、JavaScript、JavaScript Dom、Json等技术实现，使得用户在向服务器发出请求的时候通过Ajax的异步通讯实现，这样极大的提升的用于界面的友好性，避免了传统分页技术在实现分页时页面刷新的情况。

AJAX的优点和缺点：

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于 XML的web service接口，并在客户端采 用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像 DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为[4]。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 [5]，没有恰当的预读数据 [6]，或者对XMLHttpRequest的不恰当处理[7]，都会使用户感到延迟，这是用户不欲看到的，也是他们无法理解的[8]。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax;
用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事;
Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
对串流媒体的支持没有FLASH、Java Applet好。

说了那么多，还是上真货，分析代码：

客户端代码：

Code:
  1. <?php
  2. include("../include/dbconn.php");
  3. //定义分页时每页显示的条数
  4. $PAGESIZE=15;
  5. //得到最大页
  6. $sql="selectcount(*)fromarea";
  7. $rs=mysql_query($sql);
  8. //得到查询的结果
  9. $rowsNum=mysql_result($rs,0);
  10. //得到总页数
  11. $maxPage=ceil($rowsNum/$PAGESIZE);
  12. //判断是否存在当前页值，如果存在，则当前页等于接收到得值，用于显示下面的“滑坨”起始判断
  13. //if($_GET['nowpage']){
  14. //$nowpage=$_GET['nowpage'];
  15. //}else{
  16. //不存在则设置当前页为1
  17. //$nowpage=1;
  18. //}
  19. ?>
  20. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  21. <htmlxmlns="http://www.w3.org/1999/xhtml">
  22. <head>
  23. <style>
  24. .list{
  25. width:750px;
  26. height:460px;
  27. background-color:#99FF66;
  28. overflow:auto;
  29. border:#0000FF1pxdotted;
  30. margin:0auto;
  31. }
  32. .pageNum{
  33. width:750px;
  34. height:30px;
  35. background-color:#999999;
  36. overflow:auto;
  37. border:#0000FF1pxdotted;
  38. margin:0auto;
  39. text-align:center;
  40. }
  41. </style>
  42. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  43. <title>无标题文档</title>
  44. <scriptlanguage="javascript"type="text/javascript"src="../include/ajax.js"></script>
  45. <scriptlanguage="javascript"type="text/javascript">
  46. varnowpage=1;
  47. vartotalPage=<?phpecho$maxPage;?>;
  48. varstartPage=1;
  49. varendPage=totalPage;
  51. functioninitPage(){
  52. varpageStr="";
  53. //判断总页数是否大于11，如果小于11，不处理起始、最终页码
  54. if(totalPage>11){
  55. //判断当前页-10是否存在，如果不存在则不设置起始页码
  56. if(nowpage-10>0){
  57. startPage=nowpage-10;
  58. }
  59. //判断当前页+9是否超过总页数，如过没有超过，则设置最终页码
  60. if(nowpage+9<totalPage){
  61. //设置最终页码
  62. endPage=nowpage+9;
  63. }else{
  64. //解决最后几页不显示的问题
  65. endPage=totalPage;
  66. }
  67. }
  69. //判断是否显示上一页
  70. if(nowpage!=1){
  71. pageStr+="<ahref=javascript:void(0)onclick=getDataPage("+(nowpage-1)+")>上一页</a>";
  72. }
  74. for(vari=startPage;i<=endPage;i++){
  76. pageStr+="<ahref=javascript:void(0)onclick=getDataPage("+i+")>";
  77. //判断是否加粗显示
  78. if(nowpage==i){
  79. //设置加粗显示
  80. pageStr+="<b><fontcolor=yellow>"+i+"</font></b>";
  81. }else{
  83. pageStr+=i;
  84. }
  85. pageStr+="</a>";
  87. }
  89. //判断是否显示下一页
  90. if(nowpage<totalPage){
  91. pageStr+="<ahref=javascript:void(0)onclick=getDataPage("+(nowpage+1)+")>下一页</a>";
  92. }
  94. //将当前的字符串显示到div中
  95. document.getElementById("pageNum").innerHTML=pageStr;
  97. }
  100. /*
  101. 调用ajax引擎，根据页码查询数据库，返回当前的信息
  102. */
  103. functiongetDataPage(Page){
  105. //定义url
  106. varurl="./getDataPage2.php";
  108. //定义变量
  109. varparams="nowPage="+Page+"&pageSize="+<?phpecho$PAGESIZE?>;
  110. //调用ajax引擎，并制定函数处理服务器返回的结果
  111. ajaxget(url,params,getDataPageProcess);
  113. }
  115. /*
  116. 处理服务器返回的数据，并显示出来
  117. */
  118. functiongetDataPageProcess(xhr){
  119. //重新初始化开始页
  120. startPage=1;
  121. //将json字符串转换为对象
  122. varresponseObj=eval("("+xhr.responseText+")");
  123. //接收并设置当前页
  124. nowpage=parseInt(responseObj.nowPage);
  125. //重新初始化一下页码显示
  126. initPage();
  127. //显示出所有的数据
  129. varliststr="<table><tr><thwidth='20%'>id</th><thwidth='20%'>名称</th><thwidth='20%'>拼音</th><thwidth='20%'>编码</th><thwidth='20%'>缩写</th></tr>";
  130. for(vari=0;i<responseObj.areas.length;i++){
  132. liststr+="<tr><tdalign='center'>"+responseObj.areas[i].id+"</td><tdalign='center'>"+responseObj.areas[i].name+"</td><tdalign='center'>"+responseObj.areas[i].p+"</td><tdalign='center'>"+responseObj.areas[i].code+"</td><tdalign='center'>"+responseObj.areas[i].l+"</td></tr>";
  134. }
  136. liststr+="</table>";
  138. //将拼接完成的table字符串显示在id为list的div中
  139. document.getElementById("list").innerHTML=liststr;
  140. }
  143. </script>
  144. </head>
  146. <bodyonload="initPage();getDataPage(1);">
  147. <divid="list"class="list"></div>
  148. <divid="pageNum"class="pageNum"></div>
  149. </body>
  150. </html>

客户端通过每次传递当前页和每页显示的数据大小到服务器端，服务器端接受参数并按照分页算法，查询对应的数据，并且返回Json格式的字符串，客户端根据服务端返回的Json字符串，通过使用eval方法转换为对象并存放到resopnseObj变量中，则我们可以通过访问responseObj访问查询的数据，最后使用javascript Dom中对象的innerHTML的方法实现数据的显示

服务端代码如下：

Code:
  1. <?php
  2. //连接数据库
  3. include("../include/dbconn.php");
  4. //接收参数，获取当前页
  5. $nowPage=$_GET['nowPage'];
  6. $pageSize=$_GET['pageSize'];
  7. //根据当前页，分页查询
  8. $sql="selectid,name,p,code,lfromarealimit".($nowPage-1)*$pageSize.",".$pageSize;
  9. //执行查询操作
  10. $rs=mysql_query($sql);
  11. //封装成**数组
  12. $arr=array();
  13. while($rows=mysql_fetch_assoc($rs)){
  14. //每一行数据封装到$arr中，形成的是一个二维数组
  15. $arr[]=$rows;
  16. }
  17. $arr2=array("nowPage"=>$nowPage,"areas"=>$arr);
  18. //arr2("nowPage"=>$nowPage,"areas"=>arr(row("id"=>,"name"=>，....),array("id"=>,"name"=>，....)))
  19. //转换成json字符串
  20. echojson_encode($arr2);
  21. ?>

以上代码简单清晰，难点在于服务器端如何封装json格式的字符串，但是本文注释比较全了，应该能看明白。

另外，本分页算法只要稍加改动服务器端数据就可以实现，Asp、jsp、.NET的通用

你可能感兴趣的:(Ajax+Js+Dom+Json无刷新分页技术)

  • Ajax的简介和使用 m0_72131231 ajax前端
    一、Ajax简介AJAX全称为AsynchronousJavaScriptAndXML，就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。1、XML简介XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定
  • 结合Vue与Mybatis-plus优雅的设计分页展示 程序员小徐同学 springbootvue.jsmybatis前端
    分页技术组件的实现与前端显示在这个示例中，我们将结合Vue.js前端代码、请求处理逻辑、以及后端Java代码，实现分页功能。该功能的核心是通过前端传递分页参数给后端，后端处理请求并返回相应的数据，最后前端显示分页后的数据。1.前端Vue.js代码在Vue.js中，我们使用了ElementUI的Pagination组件来处理分页。前端代码中listQuery包含了分页所需的参数，例如currentP
  • Puock基于WordPress开发的高颜值的自适应主题 支持白天与黑夜模式v2.8.4 专业软件系统开发 源码下载wordpress主题
    内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍WordPress管理后台中的「外观」-「主题」中点击「添加」，选择Puock的主题包进行上传安装并启用即可。提示：为了防止主题不兼容，请在安装主题前进行数据备份，防止数据字段重复覆盖等情况发生。环境要求WordPress>=6.0，PHP>=7.4主题特性支持白天与暗黑模式全局无刷新加载支持博客、CMS、企业三
  • Vue 实现分页效果 下拉加载页面 喜欢硬编码 WEB开发vuejavascript
    2020年10月27日17:57:58MR黎原文链接：文档：Vue.note链接：http://note.youdao.com/noteshare?id=7e281484b7c61482547950f5e93be591应用于PC端的网站项目使用Vue+axios+Element等组件进行开发，项目需求首页的提供需求展示列表页面需要下拉无刷新加载页面。页面数据初始化,Data数据中添加三个初始化的变
  • AJAX应用【股票案例、验证码校验】 Java3y
    股票案例我们要做的是股票的案例，它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中，它会显示具体的信息。我们首先来看一下要做出来的效果：这里写图片描述服务器端分析首先，从效果图我们可以看见很多股票基本信息：昨天收盘价、今天开盘价、最高价、最低价、当前价格、涨幅。这些信息我们用一个类来描述出来。我们发现数据是定时刷新的，于是我们需要一个定时器。服务器端的数据和客户端交互，我们使用JSON吧服务器
  • 【 React 】对React Router的理解？常用的Router 组件有哪些 前端小超人rui React面试题react.js前端前端框架
    1react-router是什么react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新因此，可以通过前端路由可以实现单页(SPA)应用react-router主要分成了几个不同的包：react-router:实现了路由的核心功能react-router-dom:基于r
  • React和Vue 中的 router 实现原理如何 xxq_0217 vue面试题react.jsvue.js前端前端框架
    React和Vue中的路由器（Router）实现原理类似，都是基于监听URL变化，然后根据不同的URL加载相应的组件或页面。下面是它们的一般实现原理：ReactRouter实现原理：HistoryAPI：ReactRouter使用HTML5HistoryAPI（pushState()和replaceState()方法）来操作浏览器的历史记录，从而实现无刷新页面的路由切换。监听URL变化：React
  • iconfont.cn无刷新修改Font Class 小马普莱斯
    //==UserScript==//@nameiconfont.cn无刷新修改FontClass//@namespacehttps://ansonhorse.github.io///@version0.1//@descriptioniconfont.cn无刷新修改FontClass//@authorAnxon//@matchhttp://www.iconfont.cn/manage/index*/
  • AJAX，无需刷新获取数据 SnowTT_ AJAXajax
    AJAXAsynchronousJavaScriptAndXML,译为异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。XML（可扩展标记语言）用来存储数据。但其基本被JSON取代AJAX的特点优点：可以无需刷新页面而与服务器进行通信。允许根据用户事件来更新部分页面内容。缺点：没有浏览历史，不能回退存在跨域问题（同源）SEO不友好HTTP协议(hyper
  • 2022-04-15 风筝风
    AJAX1.概念AJAX全称为AsynchronousJavascriptAndXML，就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一门技术。简单来说:ajax是一门技术,不是一门语言,可以在不用加载整个网页的情况下,就可以对局部网页做刷新,刷新的时候,无刷新操作2.特点优点:1.可以无刷新页面与后端通信2.可以
  • 前端ajax技术 taiguolaotu 浅谈前端前端ajaxjavascript
    ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。参考链接
  • 前端知识：ajax 长不大的大灰狼 前端知识javaajax
    ajaxajax技术的目的是让javascript发送http请求（实现局部刷新或无刷新的效果），与后台通信，获取数据和信息。ajax技术的原理是实例化xmlHttpRequest对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据1同步和异步现实生活中，
  • 微信小程序滚动分页加载优化方案 WGinit 小程序微信小程序javascript
    mini-scrolling-loading组件微信小程序滚动加载拓展组件，对官方方案进行了以下优化：减少重复去写分页加载函数和分页逻辑支持长列表虚拟渲染优化删除子项无刷新交互使用安装组件npmimini-scrolling-loading--save在页面的json配置文件中添加mini-scrolling-loading自定义组件的配置{"usingComponents":{"mini-scr
  • 原生js-Ajax封装 学而时习之不亦说乎。 jsajaxjavascript服务器
    Ajax说道ajax到底什么是ajax？ajax是一种创建交互网页应用的一门技术。ajax的应用场景有：（地图）实时更新，表单验证等等....ajax的优缺点：优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制）2.一个Ajax请求多了，也会出现页面加载慢的情况。3.搜索引擎的支持程度比较低。4.ajax的安全性问题不太好
  • ajax的原理和运行机制 小小暴徒 ajaxajaxxmlhttprequestjavascript浏览器服务器callback
    关于ajax，是最近炒得非常火的一种技术，并且时下它也是非常流行。当然，它并不是什么新技术，而是在各种已有的技术和支持机制下的一个统一。在我的项目中，偶尔也会用到ajax，用来给用户一些无刷新的体验。用过几次之后，我个人决定对它的原理和运行机制做一个总结。ajax这个名字据说是AsynchronousJavaScript+XML的简写，实际上，它由下列几种技术组合而成。1.使用CSS和XHTML来
  • 【Vue3+Vite】路由机制router 快速学习 第四期 道格维克 前端#Vue学习前端
    文章目录路由简介路由是什么路由的作用一、路由入门案例1.创建项目导入路由依赖2.准备页面和组件3.准备路由配置4.main.js引入router配置二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结路由简介路由是什么路由就是根据不同的URL地址展示不同的内容或页面。页面切换路由的作用单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升
  • JavaWeb，Vue的学习（下） 二狗mao JavaWeb学习vue.js前端JavaWeb
    Router路由路由（Router）简介定义：路由就是根据不同的URL地址展示不同的内容或页面。通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。路由的作用单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。路由的例子
  • Django实现富文本编辑器Ckeditor5图片上传功能 轻编程 djangosqlitepython
    上一章我们已经为我们的博客继承了富文本编辑器Ckeditor5，虽然已经可以对文字进行排版处理，虽然已经可以通过插入图片的url地址来插入图片，但还无法通过本地上传图片，那么我们这个富文本编辑器就是不完整的，这一章我们将实现上传图片功能！Ckeditor5图片上传采用的是异步上传的方式，也就是Ajax无刷新上传文件，那么我们的后端就要求返回的数据格式为JSON，并且必须符合要求!Ckeditor5
  • 前端框架 - htmx zhaojjjjjj163 html
    前端框架很多，但是很多时候只是想要一个简单的功能，如点击一个按钮，然后发送一个请求，然后更新页面的某个部分，这个时候，就不需要复杂的前端框架，只需要一个简单的工具就可以了，这个时候，htmx就是一个很好的选择。htmx的实现原理是通过AJAX、HTML5和WebSocket等技术，将前端和后端的交互方式从传统的请求-响应模式转变为增量更新模式，从而实现了无刷新、无跳转的动态页面更新。htmx如何使
  • ajax的原理及优缺点？ weixin_33810006 javascript后端ViewUI
    Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。优点：1》无刷新更新数据2》异步服务器通信3》前端和后端负载平衡4》基于标准备广泛支持5》界面与应用分离缺点：1》AJAX干掉了Back和Hist
  • 什么是 Ajax 和 JSON，它们的优缺点？ 前端-红孩儿
    AJAX：是一种创建快速动态网页的技术，可以使网页实现异步更新阿贾克斯的优点：1，页面无刷新2.使用异步方式与服务器通信3.按需取数据缺点：对搜索引擎的支持比较，对于一些手机还不是很好的支持ajaxjson：是为了让数据格式成为一种标准，更简单的被JavaScript去解析其优点：1。轻量级数据交换格式2.读书容易3.方便解析和生成4.json支持多种语言JavaScriptPhp…缺点：没有xm
  • AJAX的优缺点都有什么? cpp19930703 AJAXAJAX
    1、最大的一点是页面无刷新，用户的体验非常好。2、使用异步方式与服务器通信，具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。aja
  • Mybatis----分页 杜小白也想的美 mybatis
    1.什么是分页分页（Pagination）是指将大量数据划分为多个页面进行展示的一种技术手段。在数据量较大的情况下，将所有数据一次性显示在页面上会导致加载时间过长和页面过于庞大，影响用户体验和系统性能。分页技术通过划分数据为多个页面，并提供导航控制，使用户可以按需加载和浏览数据。通常的分页方式是根据指定的每页显示数量，将数据分为多个独立的页，每页呈现一定数量的数据。用户可以通过页码或者上一页、下一
  • this.$router.push({ path: '/'})无刷新效果 ni狠重要_3a7e
    我从A登录后到B，用户名不显示，已经在A页面把信息放入sessionStorage和localStorage中了，但是跳转的时候还是无法一登录直接显示。必须手动刷新才能显示，求解答下。谢谢哦！A页面中的请求跳转到主页，左上角，应该会显示用户名，全局session也存储了，localStorage也存储了，不考虑安全的情况下，如何才能跳转到B页面带用户信息？B页面也做了相应的判断，有值则显示用户信息
  • 开发实践_阶段三 even_123 sql
    编写一个告知APP。需求：1.登录、注册2.发布定向讯息：检测是否登录，是则向用户或用户组发布”名称+时间“；否则提示登录3.讯息接收：检测是否登录，是则查看收到信息（未读数）；点击计数跳转至信息列表；点击列表的具体信息可查看详情，同时未读-1.分页，max54.批量已读：讯息列表，勾选需要done的项，点击标记按钮，状态变更，全选只变更当前分页技术要求：1.创建user，usergroup，ms
  • ajax 和php交互,ThinkPHP 和 Ajax 之间的交互 长尾裙 ajax和php交互
    ThinkPHP和Ajax之间的交互最近正在学习PHP，在学习过程中遇到一些问题，其中的一个问题就是ThinkPHP和Ajax之间的数据交换。ajax主要功能在于：通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。也就是在页面无刷新的情况下实现数据或者表单的提交。1.AJAX的基本使用使用GET方法：$.ajax({type:"GET",url:"__URL__/deleteUs
  • ThinkPHP 和 Ajax 之间的交互 Flame_Dream 计算机之路AjaxThinkPHPAJAX和PHP交互AJAX和ThinkPHP数据交换
    ThinkPHP和Ajax之间的交互最近正在学习PHP，在学习过程中遇到一些问题，其中的一个问题就是ThinkPHP和Ajax之间的数据交换。ajax主要功能在于：通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。也就是在页面无刷新的情况下实现数据或者表单的提交。1.AJAX的基本使用使用GET方法：$.ajax({type:"GET",url:"__URL__/deleteUs
  • Vue中的路由 Router Accompany呐
    Vue中的路由RouterVueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。单页应用SPA所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体单页应用SPA
  • AJAX(一） 蕾峰 AJAXajax
    一、AJAX简介AJAX全称为AsynchronousJavaScriptAndXML,就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据AJAX不是新的编程语言（使用的js)，而是一种将现有的标准组合在一起使用的新方式。页面出现新内容但是页面没有进行刷新即为异步。四种方式发送ajax:原生、jQuery、fetch、axiosAJAX的示例如下所示
  • 前端form表单提交的方式 百木成林 Java知识总结
    1.无刷新页面提交表单表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称，form提交目标位当前页面iframe则不会刷新页面2.通过type=submit提交一般表单提交通过type=submit实现，inputtype=“submit”,浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/url
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他