js实现与后台的数据传输（验证码的实现，，个人理解，jquery 提供的ajax）

最新推荐文章于 2023-01-04 13:47:02 发布

soaringai

最新推荐文章于 2023-01-04 13:47:02 发布

阅读量673

点赞数

分类专栏： java android javaweb 文章标签： jqury javaweb 验证码

本文链接：https://blog.csdn.net/ha19990127/article/details/101715757

版权

java 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

android javaweb

2 篇文章 0 订阅

订阅专栏

先上效果图：

点击获取验证码，页面无变化

我这儿是在后台得到一个四位数验证码，在实际运用中可以用邮件的形式发送给用户，或者短信服务商提供的接口，发送给用户。

输入验证码：

点击确定：实现跳转验证

看后台：

进行验证成功

接下来看具体的实现：

前期准备：

导入js:前往jqury官网下载

或者我给的资源：

工程结构：

jsp:页面代码：重点在js里面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎登录</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="compare.action">
手机号：<input type="text" id="name" name="phone"></br>
验证码：<input type="text" name="code">
<button name="btn" type="button" οnclick="sendMsg()">发送验证码</button></br>
<input type ="submit" value="确定">
</form></body>
<script type="text/javascript">
function sendMsg() {

       var number = document.getElementById("name").value;//获取电话的值

       alert(number);
       if (number!="") {
           alert("你好你已近进入")
           $.ajax({
               url : "test.action", //发送请求test.action为url，你获取值的地址
               type : "post",//这里采用的post方式传值
               data : {
                   "number":number//传输的数据
               },
               success : function(result) {
                   sms = result;//成功以后返回的结果
               }
           });
       } else {
           alert("请输入手机号");
           return false;
       }
}
</script>
</html>

javaweb：后端代码：（重点在dopost里面）

package com.action;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
* Servlet implementation class Test
*/
@WebServlet("/test.action")
public class Test extends HttpServlet {
   private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Test() {
        super();
        // TODO Auto-generated constructor stub
    }

   /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String number =request.getParameter("number");//获取传过来的值电话号
       HttpSession session= request.getSession();//创建session对象
       session.setAttribute("number", number);，存入电话号
       TestMath tm =new TestMath();//生成随机数的工具类
       int code =tm.getMath();
       session.setAttribute("code", code);//存入随机数
       System.out.println(number);
   }

}

生成随机数的工具类：（我的做法不优）

package com.action;

import java.util.Random;

public class TestMath {

   public int getMath()
   {
       int a=0;
       Random ran =new Random();
       for(int i=0;i<100;i++)
       {
       a =ran.nextInt(10)+ran.nextInt(10000);
       if(a>1000)
       {
           System.out.println(a);
           break;
       }
       }
       return a;
   }

}

点击确定以后,跳转到compare.action(重点在doGet)

package com.action;

/**
* Servlet implementation class Compare
*/
@WebServlet("/compare.action")
public class Compare extends HttpServlet {
   private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Compare() {
        super();
        // TODO Auto-generated constructor stub
    }

   /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       response.setContentType("text/html;charset=UTF-8");
       response.setCharacterEncoding("UTF-8");
       request.setCharacterEncoding("UTF-8");
        //以上是字符处理
       String phone=request.getParameter("phone");
       String code=request.getParameter("code");//得到用户输入的验证码和电话号
       HttpSession session =request.getSession();
       String session_phone=session.getAttribute("number").toString();
       String session_code=session.getAttribute("code").toString();//得到session存放的电话号和验证码
       if(phone.equals(session_phone)&&code.equals(session_code))
       {
           System.out.println("验证码正确");//输入和session里面的电话号验证码相同则输出（实际运用可以登录成功或者注册成功）
       }
       else
       {
           System.out.println("验证码错误");
       }
   }

}

soaringai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现与后台的数据传输（验证码的实现，，个人理解，jquery 提供的ajax）

先上效果图：点击获取验证码，页面无变化我这儿是在后台得到一个四位数验证码，在实际运用中可以用邮件的形式发送给用户，或者短信服务商提供的接口，发送给用户。输入验证码：点击确定：实现跳转验证看后台：进行验证成功接下来看具体的实现：前期准备：导入js:前往jqury官网下载或者我给的资源：工程结构：jsp:页面代码：重点在j...
复制链接

扫一扫