JSP:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String webRoot = request.getContextPath(); %> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta name="renderer" content="webkit"> <!-- 手机自适应？ --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>2020信息查询</title> <script type="text/javascript">var webRoot="<%=webRoot %>"</script> <link href="/bootstrap.min.css" rel="stylesheet"> <link href="/bootstrap-datepicker3.min.css" rel="stylesheet"> <link href="/font-awesome.min.css" rel="stylesheet"> <!-- style for large viewport --> <link href="/common.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="/html5shiv.js"></script> <script src="/respond.min.js"></script> <![endif]--> </head> <body> <!-- 头 --> <header> <iframe class="......." scrolling="no" src="http://......."></iframe> </header> <form id="infoForm" class="form-horizontal container"> <div class="apply-box"> <h2 class="apply-box-title">2020年信息查询标题</h2> <div class="apply-box-item"> <h3 class="apply-box-item-title">查询信息二级标题</h3> <div class="row"> <!-- 输入框 --> <div class="form-group col-sm-6"> <label class="col-sm-4 control-label">统一查询编码：</label> <div class="col-sm-8"> <!--placeholder：框内提示，onblur：鼠标失焦，onkeyup：按键弹起 --> <input type="text" class="form-control" id="suid" placeholder="请输入统一查询编码" onblur="demo();" onkeyup="upperCase()" value="" > <!-- 输入有误框下提示： --> <span id = "sud" class="help-block2" style = "display : none;">  请正确输入统一查询编码</span> </div> </div> <div class="form-group col-sm-6"> <label class="col-sm-4 control-label">证件号码：</label> <div class="col-sm-8"> <input type="text" class="form-control" id="cardid" name="cardid" placeholder="请输入证件号码" onblur="demo2();" onkeyup="upperCase()" value="" > <span id = "cid" class="help-block2" style = "display : none;">  请正确输入证件号码</span> </div> </div> <!-- 单选下拉框 --> <div class="form-group col-sm-6"> <label class="col-sm-4 control-label">证件类型：</label> <div class="col-sm-8"> <select class="form-control" id="type"> <option>居民身份证</option> <option>港澳居民居住证</option> <option>港澳居民来往内地通行证</option> <option>台湾居民居住证</option> <option>台湾居民来往大陆通行证</option> <option>护照</option> <option>中华人民共和国外国人永久居留证</option> <option>其他</option> </select> </div> </div> <!-- 验证码后台调用和点击刷新 --> <div class="form-group col-sm-6"> <label class="col-sm-4 control-label">验证码：</label> <div class="col-sm-8"> <img id="checkImg" class="login-icon-yzm" src="<%=webRoot %>/yzmImage.do?codeType=checkCode" onClick="picReload(this)"> <input type="text" class="form-control" id="imgCheck" placeholder="请输入验证码"> <span id = "img" class="help-block2" style = "display : none;">  请正确输入验证码</span> </div> </div> </div> <div class="button-bar"> <button type="button" id ="chaxun" disabled="true" onClick ="search()" class="btn btn-lg edu-btn-lg" data-toggle="modal" data-target="#normalModal" >查询</button> </div> <div class="cxxz"> <h4 class="">查询须知</h4> <p>1、凭报名学生的姓名、证件类型、证件号码、统一编码，查询信息。</p> <p>2、首次查询可登录...系统<a href="https://...." target="_blank">www.xxxxxxxx.cn</a>。</p> <p>3、技术支持电话：000-000000; 各区咨询电话：<a href="https://......." target="_blank">点击查看</a></p> </div> </div> </div> </form> <!--查询弹出框 默认尺寸--> <div id="normalModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="normalModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="normalModalLabel">2020年信息查询</h4> <!--查询内容标题--> </div> <div class="modal-body"> <p id="result1"></p> <!--查询内容展示--> </div> <div class="modal-footer"> <button type="button" class="btn btn-border" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <footer> <div class="common-content clearfix text-center"> <div class="common-bottom-logo"> <a target="_blank" href=" " title="网站找错"><img src="common/img/******.png" alt="网站找错"></a> </div> <div class="common-bottom-info"> <p><span>*******</span><span>地址：0000号</span><span>邮政编码：000000</span><span>联系电话：0000000</span><a target="_blank" href="http://www.......">网站地图</a></p > <p><a target="_blank" class="link-foot-icp" href="http://www........">ICP备：000000</a><a target="_blank" class="link-foot-hgwab" href="http://www.........">公网安备：0000000号</a><span>政府网站标识码：000000000</span></p > <p><span>服务总客服：00000</span></p > </div> <div class="common-bottom-link"> <a target="_blank" href="http://......." title="******"><img src="common/img/******.png" alt="******"></a> <a target="_blank" href="http://......" title="不良信息举报中心"><img src="common/img/*******.png" alt="不良信息举报中心"></a> </div> </div> </footer> <iframe name="........" style="display:none"></iframe> </div> <script src="/jquery-1.12.0.min.js"></script> <script src="/header.js"></script> <!-- script for current page --> <script src="/bootstrap-datepicker.min.js"></script> <script src="/validator.min.js"></script> <script type="text/javascript" src="<%=webRoot %>/******.js"></script> </body> </html>
JS：
//点击刷新验证码 function picReload(img) { img.setAttribute('src', webRoot + '/*****.do?codeType=checkCode & a=' + Math.random()); } //查询编码输入框失焦事件： function demo() { var suid = $('#suid').val(); if(suid == ""){ $("#checkImg").click(); $("#sud").show(); } else { $("#sud").hide(); } } //证件号码输入框失焦事件： function demo2() { var type = $('#type').val(); var cardid = $('#cardid').val(); var reg=/^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/; if(type == '居民身份证' && !reg.test(cardid)){ $("#checkImg").click(); $("#cid").show(); }else if(cardid == ""){ $("#checkImg").click(); $("#cid").show(); }else { $("#cid").hide(); } } function upperCase(){ var suid = $('#suid').val(); var name = $('#name').val(); var cardid = $('#cardid').val(); if(suid =="" || name =="" || cardid==""){ //查询按钮设置为不可用 $("#chaxun").attr("disabled",true); }else{ $("#chaxun").attr("disabled",false); } } function search(){ var name = $('#name').val(); var type = $('#type').val(); var cardid = $('#cardid').val(); var suid = $('#suid').val(); var useryzm = $('#imgCheck').val(); query(name, type, cardid, suid, useryzm); } function query(name, type, cardid, suid, useryzm){ $('#result1').empty(); //清空查询结果显示域 $.ajax({ type : "POST", traditional : true, url : webRoot+'/search/******.do', data : { "applyNo" : suid, "username" : name, "licenseType" : type, "licenseNo" : cardid, "useryzm" : useryzm, }, dataType : 'json', beforeSend: function(XMLHttpRequest) { $("#result1").html("<img src=img/******.gif />正在查询，请稍候......"); }, success : function(res) { console.log(res.type) if( res.type == "nodata" ){ $('#result1').html("未查到相关结果，请确认信息是否填写正确。如有疑问，请拨打电话000-000000。"); $('#checkImg').click(); //刷新验证码 $('#imgCheck').val(""); //清空验证码 }else if( res.type == "yes" ){ $('#result1').html(res.suggestion); $("#checkImg").click(); $('#imgCheck').val(""); }else if(res.type == "no"){ $('#result1').html("验证码错误"); $("#checkImg").click(); $('#imgCheck').val(""); } } }); } function showResult(url){ document.documentElement.scrollTop = document.body.scrollTop =0; //不滚动页面 var resultUrl = encodeURI(encodeURI(webRoot+url)); $.setupJMPopups({ screenLockerOpacity: "0.9" }); $.openPopupLayer({ name: "applicantLoginPopup", width: $(window).width()*0.9, url: resultUrl }); }