• 2-4 ajax请求后台验证码数据返回到前端html页面

    文章目录


    上一篇文章，我们演示了后台如何配置前台访问的请求，但地址是我们手动在地址栏输入的，我们为了更好的演绎实际生活中，客户是怎么访问网站的，我们这篇文章就在 html 页面中用 jquery 代码通过 ajax 访问后台，后台生成一个 5 位的验证码，并返回到前台页面中。

    1、前端 html 页面

    注意：因为使用 jquery 需要用到 jquery-3.2.1.js，请事先将文件放到项目中，有问题可参考 《2-2 前端 html、js、jQuery 简单使用》教程
    index.html 页面：

    DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取验证码页面title>
head>
<script type="text/javascript" src="js/jquery-3.2.1.js">script>
<script type="text/javascript" src="js/index.js">script>
<body>
	<div style="margin-left: 30%;margin-top: 10%;">
		<div>
			<label>从后台获取的5位验证码是：label>
			<input type="text" id="verifycode" name="verifycode" />
		div><br/>
		<div>
			<button id="getCode">点击获取验证码button>
		div>
	div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    直接用浏览器预览的页面效果如下：
    在这里插入图片描述

    2、编写后台

    1）配置 web.xml

    这个内容和上篇文章一样，这里就再粘贴出来一遍：

     <welcome-file-list>
   <welcome-file>index.htmlwelcome-file>
 welcome-file-list>
 <servlet>
 	<servlet-name>firstRequestservlet-name>
 	<servlet-class>helloweb.HelloControllerservlet-class>
 servlet>
 <servlet-mapping>
 	<servlet-name>firstRequestservlet-name>
 	<url-pattern>/firsturl-pattern>
 servlet-mapping>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2）编写 web.xml 中配置的类

    package helloweb;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author 太上码农/taishangcode
 * @desc 验证码操作类
 */
public class HelloController extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out = resp.getWriter();
		int num = (int)(Math.random()*90000+10000);	//获取5位验证码
		out.write(String.valueOf(num));
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    3、编写 ajax 请求后台

    编写 index.html 中引入的自定义文件 index.js 内容：

    $(function(){
	$("#getCode").click(function(){
		$.ajax({
		   type: "POST",
		   //这里的请求地址就是后台配置的地址
		   url: "http://localhost:8080/helloweb/first",
		   data: "",
		   success: function(data){
			   $("#verifycode").val(data);
		   }
		});
	});
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    4、启动 tomcat 验证效果

    将项目部署到 tomcat ，第一次将项目部署到 tomcat 并启动后，默认自动打开浏览器显示 前端页面效果（效果在第一小节已展示），然后可反复点击页面按钮，可查看效果，每次获取的验证码均不相同：
    在这里插入图片描述
    公众号有同期技能讲解视频，欢迎搜索并关注 “taishangcode”同步学习。

  • 相关阅读:
    promise加强
    HummerRisk 使用场景：混合云安全治理（1）简介
    springboot曦乐苹果园林管理系统的设计与实现毕业设计源码100854
    01 MIT线性代数-方程组的几何解释
    商超仓库管理系统
    私有云NAS千万别用铁威马TNAS，不管是用群晖还是其他私有云都可能比这个好
    Java-泛型基础
    【Java】Spring scruity 简单上手
    Spring Cloud 学习笔记（1 / 3）
    GrennPlum存储过程实战
  • 原文地址：https://blog.csdn.net/Water_Sky/article/details/126200419