模态登录

简介: 1 页面 × XXX系统用户登录 ...

1 页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <!-- bootstrap模态输入框  开始-->
  <a href="#" id="modalLoginBtn" data-toggle="modal" data-target="#myModal"></a>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog1" role="document">
      <div class="modal-content">
        <div class="modal-header">
        <button id="closeModalBtn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">XXX系统用户登录</h4>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row-fluid">
              <div class="col-xs-12">
                <form class="form-horizontal" id="login_modal_form">
                  <div class="form-group">
                    <div class="col-xs-12  ">
                      <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                        <input type="text" class="form-control" id="companyAccount" name="companyAccount" placeholder="user name">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-12  ">
                      <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="password">
                           <input type="hidden" id="key">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-6">
                      <p class="text-center remove-margin">
                        <!--<label>
                          <input type="checkbox">
                          <small>记住密码</small> </label>-->
                        </p>
                    </div>
                    <div class="col-xs-6">
                      <!-- <p class="text-center remove-margin"><small>还没注册?</small> <a href="javascript:void(0)" ><small>注册体验</small></a> </p> -->
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-12  ">
                      <button id="modal_login_btn" type="button" class="btn btn-primary btn-lg btn-block">登录</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<!-- sha1加密js -->
<script src="${pageContext.request.contextPath}/include/js/mod_security/hmac-sha1.js"></script>
<!-- 模态登录框js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/include/js/mod_security/login_modal.js"></script>
<!-- bootstrap模态输入框  结束-->

2 触发模态框

<script type="text/javascript">
    //$('#myModal').modal({backdrop: 'static', keyboard: false});//激活模态登录窗口
</script>

3 关闭模态框

$("#closeModalBtn").trigger("click");

4 登录js

$("#companyAccount").focus();

$("#modal_login_btn").on("click", function () {
     var urlStr = projectName + "/Login/login";
    var companyAccount = $("#companyAccount").val();
   var password = $("#password").val();
  
   var sha1string= CryptoJS.HmacSHA1(companyAccount, password);
   $("#key").val(sha1string);
   
   /** 阻止用户重复提交 **/
   $(this).attr("disabled", "disabled");
   
   $.ajax({
       url:urlStr,
       data:{
           companyAccount: companyAccount,
        password: $("#key").val() 
       },
       success : function(arr) {
           if(arr.success==true){a
                layer.close(load_index);
                layer.alert("登录成功");   
                $("#closeModalBtn").trigger("click");
           }else if(arr.success==false){
               layer.close(load_index);
               load_index=layer.alert(arr.message,{icon: 7});
               $("#companyAccount").focus();
           }
            $("#modal_login_btn").removeAttr("disabled");
       }, 
       beforeSend:function(XMLHttpRequest){
           load_index=layer.load(1);
       },
       complete:function(XMLHttpRequest,textStatus){   
             $("#modal_login_btn").removeAttr("disabled");
       },
       error:function(XMLHttpRequest){ 
            layer.close(load_index);
            load_index=layer.alert(busy_network,5);
        }
   });
    
});


  
//回车提交
document.onkeydown = function (e) {// 捕捉回车
   /** 获取event对象 **/
   e = e || window.event;
   /** 获取事件源 **/
   var obj = e.target || e.srcElement;
   /** 获取事件源类型 **/
   var ch = e.which || e.keyCode;

   if (ch == 13) {
       /** 触发匹配到的元素的Click事件 **/
       $("#modal_login_btn").trigger("click");
   }
}

5 依赖sha1加密js

<!-- sha1加密js -->
<script src="${pageContext.request.contextPath}/include/js/mod_security/hmac-sha1.js"></script>
开始做,坚持做,重复做
相关文章
|
4月前
|
存储 自然语言处理 搜索推荐
ChatGPT 文本Embedding融合Qdrant向量数据库:构建智能问答系统的技术探索
向量数据库结合ChatGPT带来了什么 1. **语义搜索:** 使用向量数据库进行语义搜索,可以更准确地找到与查询相关的信息。ChatGPT可以理解用户的自然语言查询,而向量数据库可以根据语义相似性返回匹配的向量数据。 2. **智能推荐:** 结合ChatGPT的智能理解和向量数据库的相似性搜索,可以实现更智能的推荐系统。系统可以根据用户的历史行为和语境,向用户推荐相似的向量数据,如文章、产品或其他内容。 3. **自然语言处理与向量表示结合:** ChatGPT可以将自然语言转换为向量表示,这样就可以在向量数据库中进行更高效的查询。这种集成使得自然语言处理和向量数据库可以相互补充等
355 0
|
机器学习/深度学习 自然语言处理 算法
跨模态学习能力再升级,EasyNLP电商文图检索效果刷新SOTA
本⽂简要介绍我们在电商下对CLIP模型的优化,以及上述模型在公开数据集上的评测结果。最后,我们介绍如何在EasyNLP框架中调用上述电商CLIP模型。
|
1天前
|
图形学 计算机视觉
CVPR 2024:仅需文本或图像提示,新框架CustomNeRF精准编辑3D场景
【4月更文挑战第22天】CustomNeRF是CVPR 2024会议上的一项创新框架,它利用文本描述或参考图像实现3D场景的精准编辑。通过局部-全局迭代编辑(LGIE)训练和类别先验正则化,该框架能精确编辑前景区域同时保持背景一致性。尽管依赖预训练模型且局限于文本和图像输入,CustomNeRF在实验中展现了高效编辑能力,为3D场景编辑开辟新路径。[链接](https://arxiv.org/abs/2312.01663)
10 2
|
27天前
|
SQL 自然语言处理 NoSQL
ChatTuGraph:通过大模型“与图对话”
相比于SQL相对成熟的语法标准,图查询语言尚未形成成熟的统一标准,目前是多种查询语法并存的状态,上手门槛高,因此更需要借助大语言模型的自然语言理解能力,降低图数据库查询语言的使用门槛。
ChatTuGraph:通过大模型“与图对话”
|
2月前
|
API 网络安全
阿里云视觉智能平台中人脸搜索功能在长时间不使用后第一次使用时出现连接失败
阿里云视觉智能平台中人脸搜索功能在长时间不使用后第一次使用时出现连接失败
228 2
|
5月前
|
机器学习/深度学习 存储 自然语言处理
XoT:一种新的大语言模型的提示技术
这是微软在11月最新发布的一篇论文,题为“Everything of Thoughts: Defying the Law of Penrose Triangle for Thought Generation”,介绍了一种名为XOT的提示技术,它增强了像GPT-3和GPT-4这样的大型语言模型(llm)解决复杂问题的潜力。
170 6
|
10月前
|
机器学习/深度学习 自然语言处理 安全
LLM系列 | 15: 如何链接多个Prompt处理复杂任务?以智能客服为例
今天这篇小作文以智能客服场景为例,介绍如何通过将复杂任务拆分为一系列简单的子任务来链接多个Prompts
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
Prompt解锁语音语言模型生成能力,SpeechGen实现语音翻译、修补多项任务
Prompt解锁语音语言模型生成能力,SpeechGen实现语音翻译、修补多项任务
|
11月前
|
计算机视觉
CVPR 2023 | 多个扩散模型相互合作,新方法实现多模态人脸生成与编辑
CVPR 2023 | 多个扩散模型相互合作,新方法实现多模态人脸生成与编辑
223 0
|
机器学习/深度学习 数据采集 Java
我深度学习0基础,还训练出一个识别验证码模型!
我深度学习0基础,还训练出一个识别验证码模型!
471 0
我深度学习0基础,还训练出一个识别验证码模型!