校园商铺-4店铺注册功能模块-11店铺类别区域信息的获取

1.导入验证码需要的依赖

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2.web.xml

<?xml version="1.0" encoding="UTF-8" ?>
<web-app version="3.1"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee    http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    metadata-complete="true">
    <display-name>Archetype Created Web Application</display-name>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <!-- 定义验证码的样式 -->
        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        <!-- 字体颜色 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptche.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        <!-- 使用那些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345679</param-value>
        </init-param>
        <!-- 图片高度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 字体大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        <!-- 干扰线的颜色 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 验证码的字符个数 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 字体:宋体 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.name</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>spring-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-*.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>spring-dispatcher</servlet-name>
        <!-- 默认匹配所有的请求 -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

3.common.js

/**
 * 
 */
function changeVerifyCode(img){
    img.src="../Kaptcha?" + Math.floor(Match.random()*100);
}

4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SUI Mobile Demo</title>
<meta name="description"
    content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<!-- Google Web Fonts -->

<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<!-- <script>
    (function(){
        alert('妈蛋，为什么不能引用js文件？');
    })();
</script> -->
<script>
    //ga
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</head>
<body>
    <div class="page-group">
        <div id="page-label-input" class="page">
            <header class="bar bar-nav">
                <a class="button button-link button-nav pull-left back"
                    href="/demos/form"> <span class="icon icon-left"></span> 返回
                </a>
                <h1 class="title">商店信息</h1>
            </header>
            <div class="content">
                <div class="list-block">
                    <ul>
                        <!-- 商铺名称 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺名称</div>
                                    <div class="item-input">
                                        <input type="text" id="shop-name" placeholder="商铺名称">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 商铺分类 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺分类</div>
                                    <div class="item-input">
                                        <select id="shop-category" placeholder="商铺分类">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 区域分类 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">所属区域</div>
                                    <div class="item-input">
                                        <select id="shop-area">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 详细地址 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input">
                                        <input type="text" id="shop-addr" placeholder="详细地址">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 联系电话 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">联系电话</div>
                                    <div class="item-input">
                                        <input type="text" id="shop-phone" placeholder="联系电话">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 缩略图 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">缩略图</div>
                                    <div class="item-input">
                                        <input type="file" id="shop-img">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 店铺简介 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">店铺简介</div>
                                    <div class="item-input">
                                        <textarea id="shop-desc" placeholder="店铺简介">
                                        </textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 验证码 -->
                        <li>
                            <div class="item-content">
                                <div class="item-title label">验证码</div>
                                <input type="text" id="j_kaptcha" placeholder="请输入验证码">
                                <div class="item-input">
                                    <img id="captcha_img" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src="../Kaptcha"  />
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-50">
                            <!-- 点击返回，返回到店铺管理页 -->
                            <a href="#" class="button button-big button-fill button-danger">返回</a>
                        </div>
                        <div class="col-50">
                            <!--  -->
                            <a href="#" class="button button-big button-fill button-success"
                                id="submit">提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type='text/javascript'
        src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript'
        src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript'
        src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript'
        src='../resources/js/shop/shopoperation.js' charset="utf-8"></script>
        <script type='text/javascript'
        src='../resources/js/common/common.js' charset="utf-8"></script>

</body>
</html>

shopoperation.js

/**
 * 
 */
$(function(){
    var initUrl = '/o2o/shopadmin/getshopinitinfo';//获取店铺的初始信息，还未定义
    var registerShopUrl = '/o2o/shopadmin/registershop';//注册店铺
    alert(initUrl);//调试弹窗，证明js文件被加载
    getShopInitInfo();//调用方法
//  定义第一个方法getShopInitInfo：获取商铺分类、区域的列表信息
    function getShopInitInfo(){
        $.getJSON(initUrl,function(data){ //访问的URL，回调方法
            if(data.success){ //true
                var tempHtml = '';//存放店铺类别列表
                var tempAreaHtml = '';//存放区域列表
                data.shopCategoryList.map(function(item,index){//用map遍历店铺类别列表，生成如<option data-id="1">盖浇饭</option>的列表
                    tempHtml += '<option data-id="' + item.shopCategoryId + '">' +item.shopCategoryName + "</option>";
                });
                data.areaList.map(function(item,index){//用map遍历区域列表，生成如<option data-id="1">东苑</option>的列表
                    tempAreaHtml += '<option data-id="' + item.areaId + '">' + item.areaId + '</option>';
                });
                //完成遍历之后，将获取到的信息，塞进前台定义好的id里面 #是css的用法，代表id
                $('#shop-category').html(tempHtml);
                $('#area').html(tempAreaHtml);
            }
        });
    //第二个方法：点击提交，获取到表单信息，通过ajax转发到后台
    $('#submit').click(function(){//点击id为submit的空间，调用方法
        var shop={};//json对象
        //获取控件的信息
        shop.shopName = $('#shop-name').val();
        shop.shopAddr = $('#shop-addr').val();
        shop.phone = $('#shop-phone').val();
        shop.shopDesc = $('#shop-desc').val();
        shop.shopCategory = {
                shopCategoryId:$('#shop-category').find('option').not(function(){//返回被选中的
                    return !this.selected;
                }).data('id')
        };
        shop.area = {
                areaId:$('#area').find('option').not(function(){
                    return !this.selected;
                }).data('id')
        };
        var shopImg = $('#shop-img')[0].files[0];
        var formData = new FormData();//定义表单，用于接收
        fromData.append('shopImg',shopImg);
        formData.append('shopStr',JSON.stringify(shop));//将json转换成字符流
        var verifyCodeActual = $('#j_captcha').val();
        if(!verifyCodeActual){
            $.toast('请输入验证码！');
            return;
        }
        formData.append('verifyCpdeActural',verifyCpdeActural);
        $.ajax({
            url:registerShopUrl,
            type:'POST',
            data:formData,
            contentType:false,//既要传文件，又要传文字，设为false
            proceesData:false,
            cache:false,
            success:function(data){
                if(data.success){
                    $.toast("提交成功！");
                }else{
                    $.toast("提交失败："+data.errMsg);
                }
                $('#captcha_img').click()
            }
        });
    });
    }
})

package com.csj2018.o2o.util;

import javax.servlet.http.HttpServletRequest;

public class CodeUtil {
    public static boolean checkVerifyCode(HttpServletRequest request) {
        String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        String verifyCodeActual = HttpServletRequestUtil.getString(request,"verifyCodeActual");
        if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
            return false;
        }
        return true;
    }
}

来源：https://www.cnblogs.com/csj2018/p/12193201.html

标签

formdata