短信验证码_id="yzm" name="yzm"><input type="button" id="yzmfs-CSDN博客

本文链接：https://blog.csdn.net/weixin_44100240/article/details/86530007

方法一:

思路

1.引入相关坐标
2.引入所需js文件
3.写form表单
4.后台通过入参接收前台发送的手机号
5.随机生成一个验证码
6.将随机生成的验证码放到session中
7.将手机号和验证码传给工具包调用工具包接口来发送短信

前台页面

<%--
  Created by IntelliJ IDEA.
  User: LI WAN
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>

    <base href="<%=basePath%>">
    <script src="${path}/js/jquery-1.11.3.js"></script>
    <script src="${path}/js/echarts.js"></script>
    
    <title>标题</title>
</head>
<body>

    <form action="" METHOD="post">
        手机号：<input id="phone" name="phone">
        验证码：<input id="yzm" name="yzm">
                <input type="button" value="获取验证码" onclick="sendYzm()">
                <input type="button" value="注册" onclick="login()">
                
    </form>
</body>
<script>

    function sendYzm() {
        $.ajax({
            url:"loginYzm.do",
            data:{"phone":$("#phone").val()},
            dataType:"json",
            type:"post",
            success:function (data) {
                if(data.error==0){
                    alert("发送成功!");
                }else {
                    alert("发送失败,请稍候重试!");
                }
            }
        })
    }

</script>
</html>

后台controller

package com.name.user.controller;

import com.name.user.service.UserService;
import com.name.utils.Yzm;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpSession;
import java.text.DecimalFormat;
import java.util.Random;

/**
 * Created by LI WAN
 */
@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("toLogin")
    public String toJsp(){
        return "login";
    }

    //发送短信
    @ResponseBody
    @RequestMapping("loginYzm")
    public String loginYzm(String phone, HttpSession session){
        //实例化一个随机函数的类
        Random random = new Random();
        //通过nextInt 给random赋值
        int anInt= random.nextInt(999999);

        //随机补0
        DecimalFormat df = new DecimalFormat("000000");
        //anInt 随机数
        String yzm = df.format(anInt);
        System.out.println(yzm);
        //将随机生成的验证码存放到sesion中
        session.setAttribute(phone,yzm);
        //调用工具包 将手机号和验证码传给工具包 调用接口用来发送短信
      /*  return Yzm.testSend(phone,yzm);*/
        return "";
    }
    
}

工具类

package com.name.utils;

import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.ClientResponse;
import com.sun.jersey.api.client.WebResource;
import com.sun.jersey.api.client.filter.HTTPBasicAuthFilter;
import com.sun.jersey.core.util.MultivaluedMapImpl;

import javax.ws.rs.core.MediaType;

/**
 * Created by LI WAN
 */
public class Yzm {
    public static String testSend(String phone,String yzm){
        // just replace key here
        Client client = Client.create();
        client.addFilter(new HTTPBasicAuthFilter(
                "api","key-"));
        WebResource webResource = client.resource(
                "http://sms-api.luosimao.com/v1/send.json");
        MultivaluedMapImpl formData = new MultivaluedMapImpl();
        formData.add("mobile",phone);
        formData.add("message", "验证码："+yzm+"【铁壳测试】");
        ClientResponse response =  webResource.type( MediaType.APPLICATION_FORM_URLENCODED ).
                post(ClientResponse.class, formData);
        String textEntity = response.getEntity(String.class);
        int status = response.getStatus();
        //System.out.print(textEntity);
        //System.out.print(status);
        return textEntity;
    }
//语音验证
  public static String testSend2(String phone,String yzm){
        // just replace key here
        Client client = Client.create();
        client.addFilter(new HTTPBasicAuthFilter(
                "api","key-"));
        WebResource webResource = client.resource(
                "http://voice-api.luosimao.com/v1/verify.json");
        MultivaluedMapImpl formData = new MultivaluedMapImpl();
        formData.add("mobile", phone);
        formData.add("code", yzm);
        ClientResponse response =  webResource.type( MediaType.APPLICATION_FORM_URLENCODED ).
                post(ClientResponse.class, formData);
        String textEntity = response.getEntity(String.class);
        int status = response.getStatus();
        //System.out.print(textEntity);
        //System.out.print(status);
        return textEntity;
    }
}

方法二：

前台页面

不用放到map里

$('#myTree2').tree({
        url:"tree2.do",
        // 在用户点击一个节点的时候触发。
        onClick: function(node){
            //console.log(node.url); //获取标题
            //node.text 根据key获取value
            addTabs(node.text,node.url);
        }
    });

后台controller层

后台只需要通过id作为pid查询相对于的list集合数据。

/**
     *
     * defaultValue： 默认的值为0
     * required：
     *          true：默认的，必须传递的参数
     *          false：不是必须传递的
     * @param id
     * @return
     */
    @ResponseBody
    @RequestMapping("tree2")
    public List<TreeVO> tree2(@RequestParam(defaultValue = "0",required = false) int id){
        List<TreeVO> list =userService.treeList2(id);
        return list;
    }

serviceimpl实现类

（有入参）
调用方法一的treeList方法

 @Override//方法2
    public List<TreeVo> list2(int id) {
        return treeMapper.treeList(id);
    }