第二种使用Ajax的形式将前台的数据传输到后台：https://blog.csdn.net/weixin_43304253/article/details/120335657

1、form表单

引入了bootstrap格式。
需要导入相应的文件

form表单中的action：写使用注解的地址：我这边servelt的注解是@WebServlet("/login")
然后form表单中的action应该填写action="login"。
注意：在input输入框中要写上name属性，否则后端获取不到前端传入的数据。

<%--

  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="post" action="login">

  <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;

    }

  }

</script>

</body>

</html>


一级验证

二级验证

后端使用注解的形式使用servlet
有些idea可能没有servlet这个选项：需要在pom.xml文件中导入依赖

      <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->

        <dependency>

            <groupId>javax.servlet</groupId>

            <artifactId>javax.servlet-api</artifactId>

            <version>3.1.0</version>

            <scope>provided</scope>

        </dependency>

导入之后就可以选择

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、多说一句 关于创建servlet

2.1 没有导入servlet依赖

2.2 导入servlet依赖

第一种方式：使用form表单将前端数据提交到servelt（将前端数据提交到servlet）的更多相关文章

  1. Django中三种方式写form表单

    除了在html中自己手写form表单外,django还可以通过 继承django.forms.Form 或django.forms.ModelForm两个类来自动生成form表单,下面依次利用三种方式 ...

  2. jquery下的提交，点击按钮没反应，post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  3. java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  4. ajax无刷新方式对form表单进行赋值！

    /** * 把json数据填充到from表单中 */ <form id="editForm" action="user.php"> 用户名:< ...

  5. form表单元素中disabled的元素的值不会提交到服务器

    1.表单元素中disabled的元素的值不会提交到服务器,后台获取的值为null <form id="myForm" action="#" method= ...

  6. 常用6种type的form表单的input标签分析及示例

    <input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...

  7. form表单和CSS

    一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...

  8. 参数传递的四种形式----- URL，超链接，js，form表单

    什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...

  9. ***四种参数传递的形式——URL，超链接，js，form表单

    什么时候用GET,  查,删 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:// ...

  10. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

随机推荐

  1. 运筹帷幄决胜千里，Python3.10原生协程asyncio工业级真实协程异步消费任务调度实践

    我们一直都相信这样一种说法:协程是比多线程更高效的一种并发工作方式,它完全由程序本身所控制,也就是在用户态执行,协程避免了像线程切换那样产生的上下文切换,在性能方面得到了很大的提升.毫无疑问,这是颠扑 ...

  2. Vue3系列11--Teleport传送组件

    Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,不受父级style.v-show等属性影响,但data.prop数据依旧能够共用的技术:类似于 Rea ...

  3. Linux系列之压缩命令

    前言 Linux 有三个常用的压缩命令:gzip.bzip2和 tar .本文介绍它们的区别和简单用法. 压缩文件 数据压缩是去除数据中冗余部分的过程,需要通过压缩算法完成.这些算法可分为两类: 无损 ...

  4. 部署 Vite 静态网站到 Gitee Pages

    开启仓库的 Gitee Pages 服务,部署目录 dist/: Vite 构建 build,输出到 dist 文件:取消 .gitignore 中的 dist: Vite preview 查看静态网 ...

  5. 【2022知乎爬虫】我用Python爬虫爬了2300多条知乎评论！

    您好,我是 @马哥python说,一枚10年程序猿. 一.爬取目标 前些天我分享过一篇微博的爬虫: https://www.cnblogs.com/mashukui/p/16414027.html 但 ...

  6. 【HTML】学习路径1-网页基本结构-标签基本语法

    本系列将学习最基础的web前端知识: HTML---CSS---JavaScripts---jQuery 四大部分学习完以后再进入到JavaWeb的知识.(后端) 然后再学习SpringBoot技术. ...

  7. Java开发学习(二十七)----SpringMVC之Rest风格解析及快速开发

    一.REST简介 REST(Representational State Transfer),表现形式状态转换,它是一种软件架构风格 当我们想表示一个网络资源的时候,可以使用两种方式: 传统风格资源描 ...

  8. 简单创建一个SpringCloud2021.0.3项目（一）

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 新建父模块和注册中心 1. 新建父模块 2. 新建注册中心Eureka 3. 新建配置中心Config 4. 新建两个业务服务 1. ...

  9. SpringMVC 03: 请求和响应的乱码解决 + SpringMVC响应Ajax请求

    请求或响应的中文乱码问题 tomcat9解决了get请求和响应的中文乱码问题,但是没有解决post请求或响应的中文乱码问题 tomcat10解决了get和post请求以及响应的中文乱码问题 考虑到实际 ...

  10. JVM之HotSpot虚拟机是如何发起内存回收的? 转载

    1.背景 在上一节中,我们掌握了垃圾收集的一些算法,也弄明白了分代回收的原理, 那么HotSpot虚拟机是如何发起内存回收的? 2.如何找到GC Roots根节点(枚举根节点) 从可达性分析中GC R ...