点击提交按钮后使用Ajax将用户名和密码传至后台校验,然后判断返回结果进行跳转或提示错误。

 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html> <head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel='stylesheet prefetch' href='login/bootstrap.min.css'>
<link rel="stylesheet" href="login/style.css">
<script src="jquery-3.2.1.min.js"></script> <script type="text/javascript">
function sub() {
var name = $("#name").val();
var password = $("#password").val();
//第二步:验证数据,这里需要从数据库调数据,我们就用到了ajax
$.ajax({
url: "/usercheck",//请求地址
data: {name: name, password: password},//提交的数据
type: "POST",//提交的方式
dataType: "TEXT", //返回类型 TEXT字符串 JSON XML
success: function (data) { // 校验返回内容,进行跳转
//开始之前要去空格,用trim()
if (data.trim() == "true") {
window.location.href = "/welcome?name=" + name + "&password=" + password;
}
else {
alert("用户名或者密码错误!");
}
}
})
} </script>
</head> <body>
<div class="wrapper">
<div class="form-signin">
<h2 class="form-signin-heading">请登陆</h2>
<input type="text" class="form-control" value="mike" name="name" id="name" placeholder="用户名" required=""
autofocus=""/>
<input type="password" class="form-control" value="123" name="password" id="password" placeholder="密码"
required=""/>
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe">记住我
&nbsp;&nbsp;&nbsp;&nbsp;<a href="infoSubmit.html">注册</a>
</label>
<%--<button class="btn btn-lg btn-primary btn-block" id="btn">登陆</button>--%>
<button type="submit" id="btn" class="btn btn-lg btn-primary btn-block" onclick="sub()">提交</button>
</div>
</div>
</body> </html>

界面如下:

Ajax+JSP登陆后带参数跳转的更多相关文章

  1. 使用openURL实现程序间带参数跳转详解

    使用openURL实现程序间带参数跳转详解 实现的效果:有两款应用A与B,A打开B A --> B 1. 新建工程B,bundle ID为com.YouXianMing.B 建立一个URL 这么 ...

  2. vue-如何实现带参数跳转页面

    [前后端分离项目之vue框架经验总结] 文/朱季谦 在vue框架的前端页面上,若要实现页面之间的带参数跳转,可参考以下实现过程: 例如,点击截图中的“查看试卷”,可实现带参跳转到相应的试卷页面,该功能 ...

  3. 10.vue router 带参数跳转

    vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...

  4. react-踩坑记录——Link带参数跳转后this.props为空对象

    原因,自组件在挂载时,父组件没向其传props划线部分不可缺少!!!!!!

  5. 从A页面带参数跳转到B页面;进行解析,并显示数据,进行编辑

    A页面跳转时候的地址: parent.layer.open({ type: 2, title:'新建草稿', shadeClose: true, shade: 0.8, scrollbar: fals ...

  6. 让DJANGO里的get_success_url定义的reverse_lazy带参数跳转

    按一般的CBVS实现,这个是编辑UPDATEVIEW完成之后,跳到LISTVIEW的. 但如果带跳到DETAILVIEW,则reverse_lazy需要带上参数进行跳转. 实现预定义的PK键跳转代码如 ...

  7. 外部点击链接,登陆后,直接跳转到该链接(过滤器 + Cookie实现)

    一.web.xml (1)指定过滤的Servlet类 (2)配置过滤规则,过滤以.mail结尾的链接 <?xml version="1.0" encoding="U ...

  8. Struts2 : action跳转时带参数跳转

    在实现action跳转到另一个action时,需要携带参数,可以直接在struts.xml配置文件中对应的跳转action的地方加上,参数的配置,用ognl表达式,可以从session中取值. 如果要 ...

  9. EF 在controller 带参数跳转到新的网址

    参考文章:http://blog.csdn.net/zhensoft163/article/details/7174661 我用到了这一种方式: 跳转到同一Controller 里面的不同Action ...

随机推荐

  1. Java/JSP程序连接不上Mysql驱动问题解决方法

    错误提示: java.lang.ClassNotFoundException: com.mysql.jdbc.Driverat java.net.URLClassLoader$1.run(URLCla ...

  2. 基于Matlab的多自由度系统固有频率及振型计算

    可参考文涛,基于Matlab语言的多自由度振动系统的固有频率及主振型计算分析,2007 对于无阻尼系统 [VEC,VAL]=eig(inv(A)*K) 对于有阻尼系统,参考振动论坛计算程序 输入M,D ...

  3. Java并发(五)线程池使用番外-分析RejectedExecutionException异常

    目录 一.入门示例 二.异常场景1 三.异常场景2 四.解决方法 之前在使用线程池的时候,出现了 java.util.concurrent.RejectedExecutionException ,原因 ...

  4. BesLyric 全新版本下载 ( windows \ mac \ linux )

    导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 很荣幸地,自 beslyric 2017 年开发推出以来,得到了很多云村村民的肯定,现在 ...

  5. Java实现几种常见排序方法

    日常操作中常见的排序方法有:冒泡排序.快速排序.选择排序.插入排序.希尔排序,甚至还有基数排序.鸡尾酒排序.桶排序.鸽巢排序.归并排序等. 以下常见算法的定义 1. 插入排序:插入排序基本操作就是将一 ...

  6. eclipse调试断点【转载】

    该片博文是转载他人的博客,原博客地址:http://blog.csdn.net/maritimesun/article/details/7815903 作为开发人员,掌握开发环境下的调试技巧十分有必要 ...

  7. samba服务,连接远程开发机

    到了新环境,自己的开发机需要通过跳板机连,每次登录跳板机都需要RSA动态密码.一开始让我迷惑的是,这有个跳板机,那怎么让本地代码和开发机代码同步呢.以前公司的情况,一个是不需要跳板机,在phpstor ...

  8. 初识Identity(一)

    一.Authentication(身份验证)和Authorization(授权) 如何构建安全的web应用?authentication和authorization是asp.net中最重要最基本的防护 ...

  9. Apache与Nginx

    Apache与Nginx的优缺点比较  ---   1.nginx相对于apache的优点: 轻量级,同样起web 服务,比apache占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的 ...

  10. WPF 带清除按钮的文字框SearchTextBox

    原文:WPF 带清除按钮的文字框SearchTextBox 基于TextBox的带清除按钮的搜索框 样式部分: <!--带清除按钮文字框--> <Style TargetType=& ...