投稿
  1. 首页
  2. 服务器知识

ajax-interceptor插件

小夏•2023-6-7•服务器知识•阅读49

ajax-interceptor插件,第1张

1.在chrome应用商店点击安装 ajax-interceptor

2.使用流程

1）打开ajax-interceptor插件界面

2）界面要素简介

3）具体操作

4.使用场景

1）后端造数据困难时

2）接口返回数据不理想，模拟各种数据情况时，例如：边界值的问题

3）复现bug时

5.注意

不使用的时候记得关闭，防止影响正常的ajax请求

包括常用的加载失败重试，参数可配置是否能手动输入页码，设置按钮数目，可以调用多个page等等，调用代码很简便

<script type="text/javascript">

 var kpage

 

 $(function () {

  tocount()

 })

 

 function tocount() {

  //初始化

  $.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {

   kpage = $("#divPage").page({ dataCount: e, pageChange: topage })

  }

  })

 }

 

 function topage(i, s) {

  //数据查询

  $("#divInfo").html("加载中...")

  $.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {

   $("#tList").html(r)

   $("#divInfo").html("")

  }, error: function () {

   $("#divInfo").html("加载失败...<a href='javascript:reload()'>重试</href>")

  }

  })

 }

 

 function reload() {

  kpage.reload()

 }

 

</script>

具体jquery.kun_page.js：

/*

---------------------------------

参数config:

 

dataCount:数据总数

 

pageSize:页数据条数

 

maxButton:页码按钮数目

  

showCustom:是否能手动输入页码 

 

pageChange:页变更事件

参数：(i,s,c)

i:pageIndex,当前页

s:pageSize,页数据条数

c:pageCount,总页数

 

*/

 

(function($){

 

$.fn.page = function (config) {

 

 if (this.length != 1) {

  throw "k_page:如有多个page请调用多次!"

 }

 

  

 var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }

 config = $.extend(defaults, config)

 

 if (config.maxButton <= 1) config.maxButton = 2

 if (config.pageSize < 1) config.pageSize = 1

 //按钮数目需偶数

 if (config.maxButton % 2 != 0)

  config.maxButton++

 

 var pageIndex = 1, pageCount, move_kf

 

 //初始化页数

 function initcount() {

  pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1

 }

 initcount()

 

 var prev = "<div class="k_p_prev">上一页</div>", next = "<div class="k_p_next">下一页</div>", pbody = $(""), pcustom = $("<span class="k_custom">到第  页 </span><div class="k_btn">确定</div>"), cl = "<div class="k_cl"></div>", pipt = $("<input class="k_ipt" type="text">")

 this.empty().addClass("kun_page").append(prev)

 pipt.keypress(function (e) {

  if (e.which == 13) {

   topage("确定")

   return false

  }

 }).appendTo(pcustom.children())

 

 if (config.pageChange) {

  this.unbind("click").bind("click", function (e) {

   var _t = $(e.target)

   if (_t[0].tagName == "DIV" && _t[0].className != "kun_page") {

    topage(_t.text())

   }

  })

 }

 

 //跳转页码

 function topage(text) {

 

  switch (text) {

   case "上一页":

    if (pageIndex - 1 < 1) {

     return

    }

    pageIndex--

    move_kf = "sc_r"

    break

   case "下一页":

    if (pageIndex + 1 > pageCount) {

     return

    }

    pageIndex++

    move_kf = "sc_l"

    break

   case "确定":

 

    if (!/^\d+$/.test(pipt.val())) {

     pipt.val("")

     return

    }

    text = parseInt(pipt.val())

    if (text < 1 || text > pageCount) {

     pipt.val("")

     return

    }

 

   default:

    var _pindex = parseInt(text)

    if (pageIndex == _pindex)

     return

    move_kf = pageIndex < _pindex ? "sc_l" : "sc_r"

    pageIndex = _pindex

    break

  }

 

  gopageChange()

 }

 

 //页变更事件

 function gopageChange() {

  if (config.pageChange) {

   if (config.dataCount != 0) {

    config.pageChange(pageIndex, config.pageSize, pageCount)

    endloading()

   }

  }

 }

 

 //异步加载结束

 function endloading() {

  initpage()

 

 }

 

 //添加页码

 function initpage() {

  pbody.empty()

  var _t_maxb = config.maxButton / 2

  //前后页码集合

  var _t_listp = [], _t_listn = []

  var _min = 0, _max = pageCount

 

  for (var i = 1 i <= _t_maxb i++) {

   var _t_prev = pageIndex - i, _t_next = pageIndex + i

   //当前页码之前的页

   if (_t_prev > 0) {

    _t_listp.push("<div class="k_p_page">" + _t_prev + "</div>")

    if (i == _t_maxb) _min = _t_prev

   }

   //当前页码之后的页

   if (_t_next <= pageCount) {

    _t_listn.push("<div class="k_p_page">" + _t_next + "</div>")

    if (i == _t_maxb) _max = _t_next

   }

  }

  //显示第一页

  if (_min > 1) pbody.append("<div class="k_p_page">1</div>")

  //显示前 ……

  if (_min - 1 > 1) pbody.append("<em>...</em>")

 

  for (var i = _t_listp.length i >= 0 i--) {

   pbody.append(_t_listp[i])

  }

 

  pbody.append("<div class="k_p_page k_p_current">" + pageIndex + "</div>")

 

  for (var i = 0 i < _t_listn.length i++) {

   pbody.append(_t_listn[i])

  }

 

  //显示后 ……

  if (pageCount - _max > 1) pbody.append("<em>...</em>")

 

  //显示最后一页

  if (_max < pageCount) pbody.append("<div class="k_p_page">" + pageCount + "</div>")

 

 }

 

 initpage()

 gopageChange()

 

 this.append(pbody).append(next)

 if (config.showCustom)

  this.append(pcustom)

 this.append(cl)

 

 return { reload: gopageChange, pageCount: pageCount, recount: function (e) {

  //重新计算页数

  config.dataCount = e

  pageIndex = 1

  initcount()

  initpage()

  gopageChange()

 }

 }

 

 //console.log(_min + "*" + _max + "*" + pageCount)

}

 

 

})(jQuery)

样式kun_page.css：

.kun_page {font-size: 12pxline-height:23pxfont-family:"Microsoft YaHei"}

.kun_page .k_p_page{position:relative}

.kun_page div {float: leftmargin: 3pxborder: solid 1px #ccccursor: pointercolor: #333min-width:12pxtext-align:centerpadding:0px 5px}

.kun_page em {display: blockfloat: leftmargin: 2px}

.kun_page .k_p_current {background: #ccccolor: #fff-webkit-animation:scroll_b 300msanimation:scroll_b 300ms}

.kun_page .k_cl {clear: bothfloat: noneborder: nonemargin: 0pxpadding: 0pxwidth:0pxheight:0px}

.kun_page .k_custom {display: blockfloat: leftmargin: 3px 3px 3px 20px}

.kun_page .k_ipt {width: 30pxheight: 21pxborder: solid 1px #ccctext-align: centervertical-align:middle}

.kun_page .k_m{ opacity: 0 width: 1% height: 1%top:0pxleft:0px display:block position: absolute }

.kun_page .sc_l{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#CCCCCC), to(#645F5F))

 -webkit-transform:translate(-50px)-webkit-animation:scroll_k_l 300ms linear

 background: -moz-linear-gradient(left,#CCCCCC 0%, #645F5F 100%)

 background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%)

 transform:translate(-50px)animation:scroll_k_l 300ms linear

  

 }

.kun_page .sc_r{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#645F5F), to(#CCCCCC))

 -webkit-transform:translate(50px) -webkit-animation:scroll_k_r 300ms linear

 background: -moz-linear-gradient(left, #645F5F 0%, #CCCCCC 100%)

 background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%)

 transform:translate(50px) animation:scroll_k_r 300ms linear

 }

 

/*

animation

*/

 

@-webkit-keyframes scroll_k_l{

0%{-webkit-transform:translate(-100px)opacity:0.2width:200%height:100%}

99%{-webkit-transform:translate(-20px)opacity:0width:200%height:100%}

100%{-webkit-transform:translate(-20px)opacity:0width:1%height:1%}

}

 

@-webkit-keyframes scroll_k_r{

0%{-webkit-transform:translate(100px)opacity:0.2width:200%height:100%}

99%{-webkit-transform:translate(20px)opacity:0width:200%height:100%}

100%{-webkit-transform:translate(20px)opacity:0width:1%height:1%}

}

 

@keyframes scroll_k_l{

0%{transform:translate(-100px)opacity:0.2width:200%height:100%}

99%{transform:translate(-20px)opacity:0width:200%height:100%}

100%{transform:translate(-20px)opacity:0width:1%height:1%}

}

 

@keyframes scroll_k_r{

0%{transform:translate(100px)opacity:0.2width:200%height:100%}

99%{transform:translate(20px)opacity:0width:200%height:100%}

100%{transform:translate(20px)opacity:0width:1%height:1%}

}

 

 

@-webkit-keyframes scroll_b{

0%,99%{background: #fffcolor: #000}

100%{background: #ccccolor: #fff}

}

@keyframes scroll_b{

0%,99%{background: #fffcolor: #000}

100%{background: #ccccolor: #fff}

}

样式和动画都可以自己修改(好吧，动画效果很朴素，闹哪样，明明想了很久好吗)

pageChange事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理

所以若有需求，完全可以在我的代码上再封装一层

欢迎分享，转载请注明来源：夏雨云

原文地址:https://www.xiayuyun.com/zonghe/475697.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
小夏小夏管理员组
00
上一篇 2023-06-07
下一篇2023-06-07

发表评论

登录后才能评论

评论列表（0条）

    保存