第二种使用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. 浏览器窗口尺寸相关的 API 整理图

    整理浏览器中和屏幕尺寸相关的 API: 其中和文档相关的属性,例如 innerWidth.innerHeight.event.x.event.y 的单位为 CSS 像素,如果页面存在缩放,则需乘上缩放 ...

  2. Apache DolphinScheduler 架构演进 & Roadmap

    <DataFunSummit:大数据存储架构峰会> 2021年4月17日Apache DolphinScheduler PMC chair 代立冬参与 DataFunSummit 分享&l ...

  3. BZOJ3037 创世纪（基环树DP）

    基环树DP,攻的当受的儿子,f表选,g表不选.并查集维护攻受关系.若有环则记录,DP受的后把它当祖宗,再DP攻的. #include <cstdio> #include <iostr ...

  4. 急如闪电快如风,彩虹女神跃长空,Go语言高性能Web框架Iris项目实战-初始化项目ep00

    在Golang Web编程的世界里,君不言高性能则已,言高性能必称Iris.彩虹女神的名号响彻寰宇.名动江湖,单论一个快字,无人能出其右,就连以简洁轻量著称于世的Gin也难以望其项背,只见彩虹女神Ir ...

  5. Redis架构之哨兵机制与集群

    Redis架构之哨兵机制与集群 哨兵机制 1.介绍: Sentinel(哨兵)是redis高可用性解决方案:由一个或多个由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个 ...

  6. .net 温故知新：【7】IOC控制反转，DI依赖注入

    IOC控制反转 大部分应用程序都是这样编写的:编译时依赖关系顺着运行时执行的方向流动,从而生成一个直接依赖项关系图. 也就是说,如果类 A 调用类 B 的方法,类 B 调用 C 类的方法,则在编译时, ...

  7. JedisConnectionException: java.net.SocketException: Broken pipe (Write failed) 问题排查

    问题描述 笔者有2个应用会不定时请求redis,其中一个应用大约每分钟请求一次,可以正常请求,但是另一个大约每小时请求一次的应用,经常出现Broken pipe (Write failed)报错,具体 ...

  8. Think PHP 完整的带富文本格式以及图片上传，并且在页面上分页展示

    Think php6.0官网网址:序言 · ThinkPHP6.0完全开发手册 · 看云 (kancloud.cn) 下面是基础配置 第一步:创建TP框架,命名为tp composer create- ...

  9. KingbaseES V8R6C5单实例sys_backup.sh备份案例

    ​ 案例说明: KingbaseES V8R6C5版本中使用了securecmdd工具,用于主机节点间的通讯,默认端口8890.备份工具sys_backup.sh默认使用了securecmdd工具,对 ...

  10. 【读书笔记】C#高级编程 第十一章 LINQ

    (一)LINQ概述 语言集成查询(Language Integrated Query,LINQ)在C#编程语言中继承了查询语法,可以用相同的语法访问不同的数据源. 1.LINQ查询 var query ...