疑难杂症

最新推荐文章于 2021-11-01 16:26:25 发布
最新推荐文章于 2021-11-01 16:26:25 发布
阅读量85 收藏
点赞数
分类专栏： # 03.间接 over 文章标签： ajax
Be an ambitious young man .
本文链接：https://blog.csdn.net/qq_44686266/article/details/116070101
版权

一、使用 Ajax 提交表单，页面会刷新解决

  1. 原因：表单使用submit，会自动提交表单，当再次绑定单击事件时，又会重新提交表单，导致页面刷新。
  2. 解决方式：使用Ajax 条表单时，应使用button。
  3. 示例：
<%--
  Created by IntelliJ IDEA.
  User: 徐巍巍
  Date: 2021/4/2
  Time: 22:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>高校就业跟踪管理系统 | Login</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
</head>

<body class="hold-transition login-page">
<div class="login-box">

    <div class="login-logo">
        <a href="${pageContext.request.contextPath}/pages/login.jsp"><b>高校就业跟踪</b>管理系统</a>
    </div>

    <div class="login-box-body">
        <p class="login-box-msg">登录系统</p>

        <form id="loginForm" name="loginForm" method="post">

            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="账号" name="userAccount">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="密码" name="userPassword">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="验证码" name="verifycode">
                </div>
                <div class="col-xs-4">
                    <a href="javascript:refreshCode()">
                        <img src="${pageContext.request.contextPath}/checkCode/test.do" title="看不清点击刷新" id="vcode"/>
                    </a>
                </div>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label><a href="#">忘记密码？</a></label>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <input type="button" id="loginBtn" class="btn btn-primary btn-block btn-flat" style="width: 90px" value="登录" onclick="loginFun()">
                    </div>
                </div>
            </div>

        </form>

    </div>

    <!-- 出错显示的信息框 -->
    <div class="alert alert-warning alert-dismissible" role="alert">
        <strong id="loginMsgId"></strong>
    </div>

</div>

<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
<script>

    //切换验证码
    function refreshCode(){
        //1.获取验证码图片对象
        var vcode = document.getElementById("vcode");
        //2.设置其src属性，加时间戳
        vcode.src = "${pageContext.request.contextPath}/checkCode/test.do?time="+new Date().getTime();
    }

    // 用户登录，ajax
    function loginFun() {
        //加载数据
        $.ajax({
            url:"${pageContext.request.contextPath}/user/login.do",  //访问后台的路径
            type:'get',
            data:$('#loginForm').serialize(),                 //将表单数据序列化，格式为name=value
            dataType:'json',
            async:false,
            success:function(data){
                var loginMsg = data.loginMsg;
                if (loginMsg === "1"){
                    window.location.href="${pageContext.request.contextPath}/pages/admin_main.jsp"
                }else if (loginMsg === "2"){
                    window.location.href="${pageContext.request.contextPath}/pages/student_main.jsp"
                }else if (loginMsg === "3"){
                    window.location.href="${pageContext.request.contextPath}/pages/enterprise_main.jsp"
                }else {
                    $("#loginMsgId").html(loginMsg);
                    refreshCode();
                }
            },
            error:function(){
                $("#loginMsgId").html("服务器开小差了..........");
                refreshCode();
            }
        });
    }

</script>
</body>

</html>
哈喽天空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java笔记--验证码
Baymax0912的博客
10-07 293
生成验证码源文件 package cn.itcast.web.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.Ser
jsp中点击验证码刷新验证码
qq_41179691的博客
11-02 1075
<a href="javascript:refreshCode()"> <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/> </a> <script type="text/javascript"> /...
javaweb项目如何实现简单的验证码（以及eclipse和Linux下验证码加载不出来）
qq_43598193的博客
01-14 2685
像这样简单的验证码如何生成并显示在页面上呢？ 1.首先创建一个servlet包并创建一个VerificationCodeServlet package codewen.bookcool.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buf...
前端使用验证码功能
ju__ju的博客
06-15 1157
在登录或者找回密码的过程中,经常会遇到防止机器人大量注册而使用验证码功能,在本项目中是由前端完成验证码功能.将这个封装为了一个组件,按需引用就可以了. <template> <div class="ValidCode disabled-select" title="点击切换" :style="`width:${width}; height:${height}`" @click="refreshCode"> <span v-for="(item, index) i
把脉linux的疑难杂症
01-19
你只会windows？你真是OUT了，身为电脑开发者或者嵌入式设计的工程师而言学习linux是非常重要的。学习任何东西都是需要简化的步骤，看透彻规律，我在学习linux过程中觉得linux对于分区的要求以及命名，是重要的，...
MySQL数据库疑难杂症排查.pptx
10-14
MySQL数据库疑难杂症排查 MySQL 数据库是一种关系型数据库管理系统，广泛应用于各种 Web 应用程序中。但是，在实际应用中，我们经常会遇到各种问题，例如数据库打开速度慢、查询效率低、服务器负载高等问题。因此...
以COM对象处理Excel疑难杂症
07-21
处理Excel疑难杂症时，可能会遇到以下几种情况： 1. **错误处理**：在使用COM对象时，可能会遇到文件已被其他进程占用、路径错误等问题。我们需要捕获并处理这些异常，确保程序的稳定运行。 2. **性能优化**：大量...
mysql疑难杂症
10-12
分享老师的分析文档，看了一下基本上很实用，适合初级工程师使用
浅析电脑疑难杂症 jp.docx
10-13
浅析电脑疑难杂症
黑马旅游网项目中“点击更换验证码中遇到的问题”
Bofu
11-01 549
黑马旅游网项目中“点击更换验证码中遇到的问题”项目场景：问题描述和分析：解决方案： 项目场景： 项目场景：在编写黑马用户管理项目中的登录功能更换验证码时遇到的点击更换问题 问题描述和分析： 用checkCodeServlet制作的验证码不能被点击更新，原因是js中编写的refreshCode()函数不能被调用。 //js中refreshCode()代码 <script type="text/javascript"> //切换验证码 function refres
Spring cloud系列20 OAuth2.0的实现客户端模式(client_credentials)支持refesh code
不积跬步无以至千里; 不积小流无以成江海
07-17 7653
默认情况下OAuth2.0 客户端模式(client_credentials)不支持refresh code。现在由于业务的关系，需要支持refresh code。 在Spring OAuth2.0中 client_credentials模式对应的类是ClientCredentialsTokenGranter 在此类中有个变量可以控制是否返回refreshcode，此成员变量是allowRefresh，默认值为false。在此类的在grant()方法中，如果allowRefresh=false，则会将
登录实现图片验证码
Duktig的博客
05-21 7696
登录基本是很多前端网站都需要的功能了吧，验证码防止“注册机”也是比较常见的了。 这篇文章将详细介绍前端项目登录或者注册功能如何实现图片验证码？ 开箱即用。
Vue 随机验证码功能
冰冰的博客
06-29 370
一 Css 样式 <div class="form-group" > <div> <span>验证码：</span> <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码" /> </div> <div class="login-code" @click="refreshCode"&gt...
@RefreshScope详解
z69183787的专栏
10-08 3万+
要说清楚RefreshScope,先要了解Scope Scope(org.springframework.beans.factory.config.Scope)是Spring 2.0开始就有的核心的概念 RefreshScope(org.springframework.cloud.context.scope.refresh)是spring cloud提供的一种特殊的scope实现，用来实现配置、实例热加载。 Scope -> GenericScope -> RefreshScope
javascript refresh page 几种页面刷新的方法
小丫007的博客
09-07 8714
javascript refresh page 几种页面刷新的方法 下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下： 复制代码 代码如下:     frame              
使用HttpClient获取oAuth2.0中的code、token及refreshToken
小海子的博客
07-23 6630
授权服务器使用授权码模式（authorization_code） 添加依赖 &amp;lt;!--对用户名和密码进行base64加密--&amp;gt; &amp;lt;dependency&amp;gt; &amp;lt;groupId&amp;gt;commons-codec&amp;lt;/groupId&amp;gt; &amp;
@RefreshScope 刷新机制都不懂，还敢说会?
热门推荐
架构技术专栏
06-11 5万+
一、前言 用过Spring Cloud的同学都知道在使用动态配置刷新的我们要配置一个@RefreshScope 在类上才可以实现对象属性的的动态更新，本着知其所以然的态度，晚上没事儿又把这个点回顾了一下，下面就来简单的说下自己的理解。 总览下，实现@RefreshScope 动态刷新的就需要以下几个： @ Scope @RefreshScope RefreshScope GenericScope Scope ContextRefresher 二、@Scope 一句话，@RefreshSco
"忘记密码"功能过程及其实现细节
tianzhihensu的专栏
01-30 5038
对于忘记密码功能，一般都是通过2种方式找回：一种是通过预留电话号码发送验证码找回，另一个是通过设定邮箱找回。对于具体的找回流程，参见：http://www.yixieshi.com/ucd/9207.html。 这里结合目前做的项目，详细的说明一下密码找回的过程。这里用的是邮箱找回。根据一般的忘记密码的流程来说明。我采用的流程是： 流程 【登录】 --&gt; 【点击忘记密码】...
docker疑难杂症
最新发布
09-06
在使用Docker时，可能会遇到一些疑难杂症。其中，一些常见的问题及解决办法如下： 1. 运行docker version时报错"Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值