2、第二种传输数据的形式：使用ajax传输数据，将前台的数据传输到后端
第一种使用form表单中的action形式传输数据：https://blog.csdn.net/weixin_43304253/article/details/120335282
前端页面
<%--
Created by IntelliJ IDEA.
User: 静小文
Date: 2021/9/14
Time: 17:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<!--载入bootstrap的css-->
<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<title>信息录入界面</title>
</head>
<body>
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label for="id" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="id" id="id" placeholder="账号" onblur="return checkId()">
</div>
<div class="col-sm-3">
<span id="idTip" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-2">
<input type="password" class="form-control" name="pwd" id="pwd" placeholder="密码" onblur="return checkPwd()">
</div>
<div class="col-sm-3">
<span id="pwdTip" style="color: red"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick=" return login()">登录</button>
</div>
</div>
</form>
<%-- 如果要使用bootstrap的js插件，必须先调入jquery--%>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<%-- 然后引入bootstrap中的js--%>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
// 验证输入密码
function checkId(){
var id = $("#id").val();
var patt1=/^B[0-9]{11}$/; //正则表达式验证，匹配以B开始，然后连续11个数字
if (id === null || id === ""){
$("#idTip").text("输入的用户名为空，请输入以B开头连续十一位数字")
return false;
}else if (id.match(patt1)==null){
$("#idTip").text("请输入正确的学号格式，如B201807022223")
return false;
} else{
$("#idTip").text(" ");
}
}
// 验证密码
function checkPwd(){
var pwd=$("#pwd").val();
if (pwd === null || pwd === ''){
$("#pwdTip").text("输入的密码不能为空")
return false;
}else{
$("#pwdTip").text(" ")
}
}
// 验证登录信息
function login(){
var id=$("#id").val();
var pwd=$("#pwd").val();
// 二级验证账号
if (id === null || id === ""){
alert("请输入账号")
return false;
}
// 二级验证密码
if (pwd === null || pwd === ''){
alert("请输入密码")
return false;
}
$.ajax({
url:"login",
type:"post",
data:{
id:id,
pwd:pwd
},
success:function (){
}
})
}
</script>
</body>
</html>
servlet层
package com.zheng.controller;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/login")
public class StudentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
System.out.println("传入的用户id"+id);
System.out.println("传入的用户密码"+pwd);
}
}
2、第二种传输数据的形式：使用ajax传输数据，将前台的数据传输到后端的更多相关文章
- 【容斥原理，莫比乌斯反演】用容斥替代莫比乌斯反演第二种形式解决gcd统计问题
名字虽然很长.但是其实很简单,对于这一类问题基本上就是看你能不能把统计的公式搞出来(这时候需要一个会推公式的队友) 来源于某次cf的一道题,盼望上紫的我让潘学姐帮我代打一道题,她看了看跟我说了题解,用 ...
- Struts2之Action三种接收参数形式与简单的表单验证
有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...
- ***四种参数传递的形式——URL，超链接，js，form表单
什么时候用GET, 查,删 什么时候用POST,增,改 (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:// ...
- Jquery 页面初始化常用的三种方法以及Jquery 发送ajax 请求
第一种 $(document).ready(function(){ //文档就绪事件 }); 第二种是第一种的简略写法,效果上和第一种是等效的. $(function(){ //文档加载事件,整个文档 ...
- Python mutilprocess模块之第二种创建进程方法--继承Process类
'''创建新的进程的第二种方法: 使用类的方式,可以自己定义一个类,继承Process类,每次实例化这个类的时候, 就等于实例化一个进程对象 '''from multiprocessing impor ...
- spring mvc 防止重复提交表单的两种方法，推荐第二种
第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...
- 用四种方法将两个AJAX改为同步
用四种方法将两个AJAX改为同步 Promise.Generator函数.yield.async/await 相关 今有一题,题目为: 现有ajax1()和ajax2(),用于快速初始化CODE1和C ...
- React的第二种使用方法----脚手架方式
一.React的第二种使用方法-----脚手架 1.前提:Node.js >8.10 2.下载全局脚手架工具 npm i -g create-react-app 3.运行全局脚手架工具,创 ...
- 多线程-创建线程第二种方式-实现Runnable接口-细节和好处
1 package multithread2; 2 3 /* 4 * 创建线程的第一种方法:继承Thread类 5 * 6 * 创建线程的第二种方式:实现Runnable接口 7 * 8 * 1,定义 ...
随机推荐
- 内存问题难定位，那是因为你没用ASAN
摘要:ASAN全称:Address Sanitizer,google发明的一种内存地址错误检查器.目前已经被集成到各大编译器中. 本文分享自华为云社区<内存定位利器-ASAN使用小结>,作 ...
- Spring 请求方法的调用原理（Controller）和请求参数的获取的原理
1.请求映射原理 所有的请求都会经过DispatcherServlet这个类,先了解它的继承树 本质还是httpServlet 原理图 测试 request请求携带的参数 从requestMapp ...
- MySQL8.0错误日志Error log
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 理论知识 错误日志内容 错误日志包含mysqld启动和关闭的时间信息,还包含诊断消息,如服务器启动和关闭期间以及服务器运行 ...
- 倒计时0日！Apache DolphineScheduler4月 Meetup 大佬手把手教你大数据开发，离线调度
随着互联网技术和信息技术的发展,信息的数据化产生了许多无法用常规工具量化.处理和捕捉的数字信息.面对多元的数据类型,海量的信息价值,如何有效地对大数据进行挖掘分析,对大数据工作流进行调度,是保障企业大 ...
- ROS机械臂 Movelt 学习笔记5 | MoveIt Commander Scripting
前一讲python接口中提到moveit_commander 包.这个包提供了用于运动规划.笛卡尔路径计算以及拾取和放置的接口. moveit_commander 包还包括一个命令行接口程序movei ...
- 【深入学习.Net】.泛型集合【体检管理系统】
基于泛型List的体检管理系统(蜗牛爬坡) 第五章[体检管理系统] 一.项目展示图(基于.net core6.0) 二.首先准备两个Model类 HealthCheckItem(项目类):Name(项 ...
- SPI：Java的高可扩展利器
摘要:JAVA SPI,基于接口的编程+策略模式+配置文件的动态加载机制. 本文分享自华为云社区<一文讲透Java核心技术之高可扩展利器SPI>,作者: 冰 河. SPI的概念 JAVA ...
- 051_末晨曦Vue技术_处理边界情况之provide和inject依赖注入
provide和inject依赖注入 点击打开视频讲解更详细 在此之前,在我们描述访问父级组件实例的时候,展示过一个类似这样的例子: <google-map> <google-map ...
- 3-14 Python处理XML文件
xml文件处理 什么是xml文件? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 从结构上,很像HTML超文本标记语言.但他们被设计的目的 ...
- day31-线程基础01
线程基础01 1.程序 进程 线程 程序(program):是为完成的特定任务,用某种语言编写的一组指令的集合.简单来说,就是我们写的代码. 进程: 进程是指运行中的程序,比如我们使用QQ,就启动了一 ...