`
LF_michael
  • 浏览: 22741 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

浅谈用jQuery实现无刷新验证码

 
阅读更多

1.思路:

页面上的验证码图片是servlet,采用jquery实现异步校验信息

 

2.所用到的文件

VerifyCodeServlet.java   --用于生成图片的servlet

ResultServlet.java          --用于校验验证码正确性的servlet

verifyCode.js                  --校验的js文件

jquery.js                         --jquery包里的源文件

verifyCode.jsp                --页面

 

3.代码

  1. VerifyCodeServlet.java   
  2.  
  3. Java代码   
  4. import java.awt.Color;         
  5. import java.awt.Font;         
  6. import java.awt.Graphics2D;         
  7. import java.awt.image.BufferedImage;         
  8. import java.util.Random;         
  9.         
  10. import javax.imageio.ImageIO;         
  11. import javax.servlet.ServletException;         
  12. import javax.servlet.ServletOutputStream;         
  13. import javax.servlet.http.HttpServlet;         
  14. import javax.servlet.http.HttpServletRequest;         
  15. import javax.servlet.http.HttpServletResponse;         
  16. import javax.servlet.http.HttpSession;         
  17.         
  18. public class VerifyCodeServlet extends HttpServlet {         
  19.         
  20.     // 验证码图片的宽度。         
  21.     private int width = 60;         
  22.         
  23.     // 验证码图片的高度。         
  24.     private int height = 20;         
  25.         
  26.     // 验证码字符个数         
  27.     private int codeCount = 4;         
  28.         
  29.     private int x = 0;         
  30.         
  31.     // 字体高度         
  32.     private int fontHeight;         
  33.         
  34.     private int codeY;         
  35.         
  36.     char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',         
  37.             'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',         
  38.             'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };         
  39.         
  40.     /**       
  41.      * 初始化验证图片属性       
  42.      */        
  43.     public void init() throws ServletException {         
  44.         // 从web.xml中获取初始信息         
  45.         // 宽度         
  46.         String strWidth = this.getInitParameter("width");         
  47.         // 高度         
  48.         String strHeight = this.getInitParameter("height");         
  49.         // 字符个数         
  50.         String strCodeCount = this.getInitParameter("codeCount");         
  51.         
  52.         // 将配置的信息转换成数值         
  53.         try {         
  54.             if (strWidth != null && strWidth.length() != 0) {         
  55.                 width = Integer.parseInt(strWidth);         
  56.             }         
  57.             if (strHeight != null && strHeight.length() != 0) {         
  58.                 height = Integer.parseInt(strHeight);         
  59.             }         
  60.             if (strCodeCount != null && strCodeCount.length() != 0) {         
  61.                 codeCount = Integer.parseInt(strCodeCount);         
  62.             }         
  63.         } catch (NumberFormatException e) {         
  64.         }         
  65.         
  66.         x = width / (codeCount + 1);         
  67.         fontHeight = height - 2;         
  68.         codeY = height - 4;         
  69.         
  70.     }         
  71.         
  72.     protected void service(HttpServletRequest req, HttpServletResponse resp)         
  73.             throws ServletException, java.io.IOException {         
  74.         
  75.         // 定义图像buffer         
  76.         BufferedImage buffImg = new BufferedImage(width, height,         
  77.                 BufferedImage.TYPE_INT_RGB);         
  78.         Graphics2D g = buffImg.createGraphics();         
  79.         
  80.         // 创建一个随机数生成器类         
  81.         Random random = new Random();         
  82.         
  83.         // 将图像填充为白色         
  84.         g.setColor(Color.WHITE);         
  85.         g.fillRect(0, 0, width, height);         
  86.         
  87.         // 创建字体，字体的大小应该根据图片的高度来定。         
  88.         Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);         
  89.         // 设置字体。         
  90.         g.setFont(font);         
  91.         
  92.         // 画边框。         
  93.         g.setColor(Color.BLACK);         
  94.         g.drawRect(0, 0, width - 1, height - 1);         
  95.         
  96.         // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。         
  97.         g.setColor(Color.BLACK);         
  98.         for (int i = 0; i < 160; i++) {         
  99.             int x = random.nextInt(width);         
  100.             int y = random.nextInt(height);         
  101.             int xl = random.nextInt(12);         
  102.             int yl = random.nextInt(12);         
  103.             g.drawLine(x, y, x + xl, y + yl);         
  104.         }         
  105.         
  106.         // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。         
  107.         StringBuffer randomCode = new StringBuffer();         
  108.         int red = 0, green = 0, blue = 0;         
  109.         
  110.         // 随机产生codeCount数字的验证码。         
  111.         for (int i = 0; i < codeCount; i++) {         
  112.             // 得到随机产生的验证码数字。         
  113.             String strRand = String.valueOf(codeSequence[random.nextInt(36)]);         
  114.             // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。         
  115.             red = random.nextInt(255);         
  116.             green = random.nextInt(255);         
  117.             blue = random.nextInt(255);         
  118.         
  119.             // 用随机产生的颜色将验证码绘制到图像中。         
  120.             g.setColor(new Color(red, green, blue));         
  121.             g.drawString(strRand, (i + 1) * x, codeY);         
  122.         
  123.             // 将产生的四个随机数组合在一起。         
  124.             randomCode.append(strRand);         
  125.         }         
  126.         // 将四位数字的验证码保存到Session中。         
  127.         HttpSession session = req.getSession();         
  128.         session.setAttribute("validateCode", randomCode.toString());         
  129.         
  130.         // 禁止图像缓存。         
  131.         resp.setHeader("Pragma", "no-cache");         
  132.         resp.setHeader("Cache-Control", "no-cache");         
  133.         resp.setDateHeader("Expires", 0);         
  134.         
  135.         resp.setContentType("image/jpeg");         
  136.         
  137.         // 将图像输出到Servlet输出流中。         
  138.         ServletOutputStream sos = resp.getOutputStream();         
  139.         ImageIO.write(buffImg, "jpeg", sos);         
  140.         sos.close();         
  141.     }         
  142.         
  143. }      
  144. import java.awt.Color;      
  145. import java.awt.Font;      
  146. import java.awt.Graphics2D;      
  147. import java.awt.image.BufferedImage;      
  148. import java.util.Random;      
  149.      
  150. import javax.imageio.ImageIO;      
  151. import javax.servlet.ServletException;      
  152. import javax.servlet.ServletOutputStream;      
  153. import javax.servlet.http.HttpServlet;      
  154. import javax.servlet.http.HttpServletRequest;      
  155. import javax.servlet.http.HttpServletResponse;      
  156. import javax.servlet.http.HttpSession;      
  157.      
  158. public class VerifyCodeServlet extends HttpServlet {      
  159.      
  160.     // 验证码图片的宽度。      
  161.     private int width = 60;      
  162.      
  163.     // 验证码图片的高度。      
  164.     private int height = 20;      
  165.      
  166.     // 验证码字符个数      
  167.     private int codeCount = 4;      
  168.      
  169.     private int x = 0;      
  170.      
  171.     // 字体高度      
  172.     private int fontHeight;      
  173.      
  174.     private int codeY;      
  175.      
  176.     char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',      
  177.             'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',      
  178.             'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };      
  179.      
  180.     /**     
  181.      * 初始化验证图片属性     
  182.      */     
  183.     public void init() throws ServletException {      
  184.         // 从web.xml中获取初始信息      
  185.         // 宽度      
  186.         String strWidth = this.getInitParameter("width");      
  187.         // 高度      
  188.         String strHeight = this.getInitParameter("height");      
  189.         // 字符个数      
  190.         String strCodeCount = this.getInitParameter("codeCount");      
  191.      
  192.         // 将配置的信息转换成数值      
  193.         try {      
  194.             if (strWidth != null && strWidth.length() != 0) {      
  195.                 width = Integer.parseInt(strWidth);      
  196.             }      
  197.             if (strHeight != null && strHeight.length() != 0) {      
  198.                 height = Integer.parseInt(strHeight);      
  199.             }      
  200.             if (strCodeCount != null && strCodeCount.length() != 0) {      
  201.                 codeCount = Integer.parseInt(strCodeCount);      
  202.             }      
  203.         } catch (NumberFormatException e) {      
  204.         }      
  205.      
  206.         x = width / (codeCount + 1);      
  207.         fontHeight = height - 2;      
  208.         codeY = height - 4;      
  209.      
  210.     }      
  211.      
  212.     protected void service(HttpServletRequest req, HttpServletResponse resp)      
  213.             throws ServletException, java.io.IOException {      
  214.      
  215.         // 定义图像buffer      
  216.         BufferedImage buffImg = new BufferedImage(width, height,      
  217.                 BufferedImage.TYPE_INT_RGB);      
  218.         Graphics2D g = buffImg.createGraphics();      
  219.      
  220.         // 创建一个随机数生成器类      
  221.         Random random = new Random();      
  222.      
  223.         // 将图像填充为白色      
  224.         g.setColor(Color.WHITE);      
  225.         g.fillRect(0, 0, width, height);      
  226.      
  227.         // 创建字体，字体的大小应该根据图片的高度来定。      
  228.         Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);      
  229.         // 设置字体。      
  230.         g.setFont(font);      
  231.      
  232.         // 画边框。      
  233.         g.setColor(Color.BLACK);      
  234.         g.drawRect(0, 0, width - 1, height - 1);      
  235.      
  236.         // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。      
  237.         g.setColor(Color.BLACK);      
  238.         for (int i = 0; i < 160; i++) {      
  239.             int x = random.nextInt(width);      
  240.             int y = random.nextInt(height);      
  241.             int xl = random.nextInt(12);      
  242.             int yl = random.nextInt(12);      
  243.             g.drawLine(x, y, x + xl, y + yl);      
  244.         }      
  245.      
  246.         // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。      
  247.         StringBuffer randomCode = new StringBuffer();      
  248.         int red = 0, green = 0, blue = 0;      
  249.      
  250.         // 随机产生codeCount数字的验证码。      
  251.         for (int i = 0; i < codeCount; i++) {      
  252.             // 得到随机产生的验证码数字。      
  253.             String strRand = String.valueOf(codeSequence[random.nextInt(36)]);      
  254.             // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。      
  255.             red = random.nextInt(255);      
  256.             green = random.nextInt(255);      
  257.             blue = random.nextInt(255);      
  258.      
  259.             // 用随机产生的颜色将验证码绘制到图像中。      
  260.             g.setColor(new Color(red, green, blue));      
  261.             g.drawString(strRand, (i + 1) * x, codeY);      
  262.      
  263.             // 将产生的四个随机数组合在一起。      
  264.             randomCode.append(strRand);      
  265.         }      
  266.         // 将四位数字的验证码保存到Session中。      
  267.         HttpSession session = req.getSession();      
  268.         session.setAttribute("validateCode", randomCode.toString());      
  269.      
  270.         // 禁止图像缓存。      
  271.         resp.setHeader("Pragma", "no-cache");      
  272.         resp.setHeader("Cache-Control", "no-cache");      
  273.         resp.setDateHeader("Expires", 0);      
  274.      
  275.         resp.setContentType("image/jpeg");      
  276.      
  277.         // 将图像输出到Servlet输出流中。      
  278.         ServletOutputStream sos = resp.getOutputStream();      
  279.         ImageIO.write(buffImg, "jpeg", sos);      
  280.         sos.close();      
  281.     }      
  282.      
  283. }    
  284.  
  285.  
  286.  
  287.  
  288.  
  289. ResultServlet.java   
  290.  
  291.  
  292. Java代码   
  293. import java.io.IOException;         
  294. import java.io.PrintWriter;         
  295.         
  296. import javax.servlet.ServletException;         
  297. import javax.servlet.http.HttpServlet;         
  298. import javax.servlet.http.HttpServletRequest;         
  299. import javax.servlet.http.HttpServletResponse;         
  300.         
  301. public class ResultServlet extends HttpServlet {         
  302.         
  303.     /**       
  304.      * The doGet method of the servlet. <br>       
  305.      *       
  306.      * This method is called when a form has its tag value method equals to get.       
  307.      *        
  308.      * @param request the request send by the client to the server       
  309.      * @param response the response send by the server to the client       
  310.      * @throws ServletException if an error occurred       
  311.      * @throws IOException if an error occurred       
  312.      */        
  313.     public void doGet(HttpServletRequest request, HttpServletResponse response)         
  314.             throws ServletException, IOException {         
  315.         
  316.         doPost(request, response);         
  317.     }         
  318.         
  319.     /**       
  320.      * The doPost method of the servlet. <br>       
  321.      *       
  322.      * This method is called when a form has its tag value method equals to post.       
  323.      *        
  324.      * @param request the request send by the client to the server       
  325.      * @param response the response send by the server to the client       
  326.      * @throws ServletException if an error occurred       
  327.      * @throws IOException if an error occurred       
  328.      */        
  329.     public void doPost(HttpServletRequest request, HttpServletResponse response)         
  330.             throws ServletException, IOException {         
  331.         
  332.         response.setContentType("text/html;charset=utf-8");         
  333.         String validateC = (String) request.getSession().getAttribute("validateCode");         
  334.         String veryCode = request.getParameter("c");         
  335.         PrintWriter out = response.getWriter();         
  336.         if(veryCode==null||"".equals(veryCode)){         
  337.             out.println("验证码为空");         
  338.         }else{         
  339.             if(validateC.equals(veryCode)){         
  340.                 out.println("验证码正确");         
  341.             }else{         
  342.                 out.println("验证码错误");         
  343.             }         
  344.         }         
  345.         out.flush();         
  346.         out.close();         
  347.     }         
  348.         
  349. }      
  350. import java.io.IOException;      
  351. import java.io.PrintWriter;      
  352.      
  353. import javax.servlet.ServletException;      
  354. import javax.servlet.http.HttpServlet;      
  355. import javax.servlet.http.HttpServletRequest;      
  356. import javax.servlet.http.HttpServletResponse;      
  357.      
  358. public class ResultServlet extends HttpServlet {      
  359.      
  360.     /**     
  361.      * The doGet method of the servlet. <br>     
  362.      *     
  363.      * This method is called when a form has its tag value method equals to get.     
  364.      *      
  365.      * @param request the request send by the client to the server     
  366.      * @param response the response send by the server to the client     
  367.      * @throws ServletException if an error occurred     
  368.      * @throws IOException if an error occurred     
  369.      */     
  370.     public void doGet(HttpServletRequest request, HttpServletResponse response)      
  371.             throws ServletException, IOException {      
  372.      
  373.         doPost(request, response);      
  374.     }      
  375.      
  376.     /**     
  377.      * The doPost method of the servlet. <br>     
  378.      *     
  379.      * This method is called when a form has its tag value method equals to post.     
  380.      *      
  381.      * @param request the request send by the client to the server     
  382.      * @param response the response send by the server to the client     
  383.      * @throws ServletException if an error occurred     
  384.      * @throws IOException if an error occurred     
  385.      */     
  386.     public void doPost(HttpServletRequest request, HttpServletResponse response)      
  387.             throws ServletException, IOException {      
  388.      
  389.         response.setContentType("text/html;charset=utf-8");      
  390.         String validateC = (String) request.getSession().getAttribute("validateCode");      
  391.         String veryCode = request.getParameter("c");      
  392.         PrintWriter out = response.getWriter();      
  393.         if(veryCode==null||"".equals(veryCode)){      
  394.             out.println("验证码为空");      
  395.         }else{      
  396.             if(validateC.equals(veryCode)){      
  397.                 out.println("验证码正确");      
  398.             }else{      
  399.                 out.println("验证码错误");      
  400.             }      
  401.         }      
  402.         out.flush();      
  403.         out.close();      
  404.     }      
  405.      
  406. }    
  407.  
  408.  
  409.  
  410.  
  411.  
  412. verifyCode.js   
  413.  
  414. Java代码   
  415. function changeImg(){     
  416.     var imgSrc = $("#imgObj");     
  417.     var src = imgSrc.attr("src");     
  418.     imgSrc.attr("src",chgUrl(src));     
  419. }     
  420. //时间戳     
  421. //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳     
  422. function chgUrl(url){     
  423.     var timestamp = (new Date()).valueOf();     
  424.     urlurl = url.substring(0,17);     
  425.     if((url.indexOf("&")>=0)){     
  426.         urlurl = url + "×tamp=" + timestamp;     
  427.     }else{     
  428.         urlurl = url + "?timestamp=" + timestamp;     
  429.     }     
  430.     return url;     
  431. }     
  432.     
  433. function isRightCode(){     
  434.     var code = $("#veryCode").attr("value");     
  435.     code = "c=" + code;     
  436.     $.ajax({     
  437.         type:"POST",     
  438.         url:"resultServlet",     
  439.         data:code,     
  440.         success:callback     
  441.     });     
  442. }     
  443.     
  444. function callback(data){     
  445.     $("#info").html(data);     
  446. }    
  447. function changeImg(){  
  448.  var imgSrc = $("#imgObj");  
  449.  var src = imgSrc.attr("src");  
  450.  imgSrc.attr("src",chgUrl(src));  
  451. }  
  452. //时间戳  
  453. //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳  
  454. function chgUrl(url){  
  455.  var timestamp = (new Date()).valueOf();  
  456.  urlurl = url.substring(0,17);  
  457.  if((url.indexOf("&")>=0)){  
  458.   urlurl = url + "×tamp=" + timestamp;  
  459.  }else{  
  460.   urlurl = url + "?timestamp=" + timestamp;  
  461.  }  
  462.  return url;  
  463. }  
  464.  
  465. function isRightCode(){  
  466.  var code = $("#veryCode").attr("value");  
  467.  code = "c=" + code;  
  468.  $.ajax({  
  469.   type:"POST",  
  470.   url:"resultServlet",  
  471.   data:code,  
  472.   success:callback  
  473.  });  
  474. }  
  475.  
  476. function callback(data){  
  477.  $("#info").html(data);  
  478. }  
  479.  
  480.  
  481.  
  482. verifyCode.jsp   
  483.  
  484. Java代码   
  485. <%@ page language="java" contentType="text/html; charset=UTF-8"       
  486.     pageEncoding="UTF-8"%>       
  487. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">       
  488. <html>       
  489.     <head>       
  490.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">       
  491.         <script type="text/javascript" src="js/verifyCode.js"></script>       
  492.         <script type="text/javascript" src="js/jquery.js"></script>       
  493.         <title>test verify code</title>       
  494.     </head>       
  495.     <body>       
  496.         <input id="veryCode" name="veryCode" type="text"/>       
  497.         <img id="imgObj" alt="" src="verifyCodeServlet"/>       
  498.         <a href="#" onclick="changeImg()">换一张</a>       
  499.         <input type="button" value="验证" onclick="isRightCode()"/>       
  500.         <div id="info"></div>       
  501.     </body>       
  502. </html>      
  503. [url]http://www.javaeye.com/post/608953#[/url]    
分享到：
| JQuery Ajax三级联动地区下拉框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现无刷新验证码（java）

    jquery实现无刷新验证码，绝对可以用!!! jquery实现无刷新验证码，绝对可以用!!! jquery实现无刷新验证码，绝对可以用!!!

    jQuery ajax 无刷新 验证码 asp.net

    在实现无刷新验证码时，我们可以利用jQuery的$.ajax方法来发送异步请求到服务器获取新的验证码图片或验证用户输入的验证码是否正确。 1. **创建验证码服务**：在ASP.NET中，你可以创建一个Web服务（如ASMX或Web API...

    Ajax + JQuery 实现无刷新效果

    本篇文章将深入探讨如何结合Ajax和jQuery来实现无刷新效果。 首先，Ajax的核心在于创建异步通信，允许后台与服务器进行数据交换而不必重新加载整个页面。这主要依赖于浏览器的XMLHttpRequest对象，但直接操作这个...

    jquery实现无刷新验证码的简单实例

    在本实例中，将展示如何使用jQuery技术实现一个无刷新验证码功能。验证码的作用主要是为了防止恶意注册或登录，以及防止自动化工具进行的恶意操作。 ### 知识点一：验证码生成 在本实例中，验证码的生成是由服务器...

    jQuery数字字母组合验证码

    4. **事件绑定**：使用jQuery的`on()`或`click()`方法可以绑定事件监听器，当用户点击“刷新验证码”按钮时，会触发验证码的重新生成。 5. **正则表达式验证**：为了检查用户输入的验证码是否与生成的验证码匹配，...

    JQUERY轻松实现talble无刷新排序

    本篇文章将深入探讨如何使用jQuery实现表格无刷新排序，这是一个提高用户体验的有效方法，尤其是在处理大量数据时。 首先，我们需要理解“无刷新排序”的概念。在传统的表格排序中，用户点击表头进行排序时，页面会...

    MCV实现验证码（jquery无刷新）

    使用JQuery实现无刷新加载验证码的关键是利用Ajax技术。下面是一个简单的示例： ```javascript function reloadCaptcha() { $.ajax({ type: "POST", url: "/Account/GetNewCaptcha", // 假设这是获取新验证码的...

    jQuery拖动滑块图片拼图验证码插件.zip

    本文将深入探讨一个基于jQuery实现的此类验证码插件，分析其工作原理并提供二次修改的思路。 首先，我们来看这个插件的核心技术——jQuery。jQuery是一款轻量级的JavaScript库，它极大地简化了JavaScript代码的编写...

    Jquery实现定时刷新页面程序

    本程序是用Jquery实现网页的定时刷新的程序，简单一眼就可以看清楚。易懂。

    基于jQuery实现滚动刷新效果

    Jquery实现简单的滚动刷新效果： 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文： &lt;form id="form1" runat="server"&gt; &lt;/form&gt; Javascript操作代码： $(document)....

    jquery+ajax实现无刷新提交的功能

    通过上述分析可知，利用jQuery与Ajax技术实现无刷新提交功能的关键在于正确配置`$.ajax()`方法的各项参数，并确保后端逻辑能够正确处理接收到的数据。这种技术的应用极大提高了用户的操作体验，减少了不必要的资源...

    jquery验证码

    jQuery实现web开发验证码，无需后台验证。简单方便实用

    jquery封装好的验证码

    本篇文章将详细介绍如何使用已经封装好的jQuery验证码功能，包括其工作原理、实现方式以及如何集成到项目中。 ### 一、验证码的基本概念 验证码（CAPTCHA）全称为“Completely Automated Public Turing test to ...

    jquery实现无刷新对数据库的操作 v1.0.rar

    在标题提到的“jquery实现无刷新对数据库的操作 v1.0.rar”中，包含了一个基于ASP的示例项目，主要使用jQuery的Ajax方法实现无刷新的数据库交互。ASP（Active Server Pages）是一种微软开发的服务器端脚本环境，可以...

    jquery实现无刷新分页,跳转

    利用jQuery实现无刷新分页和跳转，不仅提升了用户的交互体验，也优化了页面的性能。通过合理初始化变量，精准计算总页数，结合灵活的跳转控制和数据动态加载，开发者可以构建出响应迅速、操作流畅的Web应用界面。在...

    jQuery实现无刷新切换主题皮肤功能

    在本文中，我们将深入探讨如何使用jQuery来实现一个无刷新切换网站主题皮肤的功能。这个功能在现代网页设计中非常常见，它可以提供用户友好的体验，让用户可以快速改变网站的外观而无需重新加载整个页面。 首先，...

    jQuery paginate无刷新分页

    这种形式的分页也是网上见得最多的，符合大部分网民的习惯，而且jQuery的引入，使本款分页效果实现无刷新，点击页码可直接显示内容，当然，测试页的内容不是太多，适合无刷新分页，当数据较多的时候，估计需要加入...

    无刷新验证码asp.net

    实现无刷新验证码的关键在于AJAX（Asynchronous JavaScript and XML），它允许网页的部分内容异步更新，而无需重新加载整个页面。在ASP.NET中，我们可以使用jQuery库或者内置的UpdatePanel控件来实现AJAX功能。 ...

    jquery实现无刷新分页插件.zip

    在实现无刷新分页时，jQuery的主要作用在于处理用户交互和动态更新内容。 1. **HTML结构**：在页面上，你需要创建一个分页区域，通常包含数字链接或者“上一页”、“下一页”的按钮。这些元素将作为用户的交互界面...

    jquery实现页面局部刷新

    **jQuery 实现页面局部刷新详解** 在Web开发中，页面刷新是常见的操作，但全局刷新会导致整个页面重新加载，这可能会浪费用户的时间和流量。为了提高用户体验，我们常常需要实现页面局部刷新，即只更新页面中特定...

Magicbox
Global site tag (gtag.js) - Google Analytics