第二种使用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. 技术分享 | ARM下中标麒麟系统ky10使用Xtrabackup-8.0.25

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 一.需求背景 查询Percona官方手册,Xtrabackup 8.0可以备份M ...

  2. 【喜讯】新一代大数据任务调度 - Apache DolphinScheduler 社区荣获OSCHINA年度 “最佳技术团队”...

    新一代大数据任务调度 -  Apache DolphinScheduler 继 11 月 19 日由 InfoQ 举办.在 300+ 参评项目中脱颖而出获得 "2020 年度十大开源新锐项目 ...

  3. 构建数据湖上低延迟数据 Pipeline 的实践

    T 摘要 · 云原生与数据湖是当今大数据领域最热的 2 个话题,本文着重从为什么传统数仓 无法满足业务需求? 为何需要建设数据湖?数据湖整体技术架构.Apache Hudi 存储模式与视图.如何解决冷 ...

  4. centos/windows服务器，Mysql数据库表结构损坏-已解决

    [问题原因]服务器突然断电 [故障报告]数据库表结构损坏 [解决思路]进入强制恢复模式,备份库表及数据重建 故障发现 周末公司断电,周一启动数据库就直接报错了 查看日志 上面标记的log,明确表示是非 ...

  5. java-运算符与判断

    运算符: 1)算术运算符:+-*/%,++,-- 进行加.减.乘.除.取余数.自增.自减 2)关系运算符:>,<,>=,<=,==,!=    boolean类型 判断两个整形 ...

  6. js运算符和逻辑分支

    运算符 1.拼接运算符:+,加号两边只要有一边出现字符串就是拼接 2.算术运算符  如:2+3: 3.赋值运算符+=,-=,/=,*= 4.关系运算符>,<,==,=== != !== ! ...

  7. LOJ6029「雅礼集训 2017 Day1」市场 （线段树）

    题面 从前有一个学校,在 O n e I n D a r k \rm OneInDark OneInDark 到任之前风气都是非常良好的,自从他来了之后,发布了一系列奇怪的要求,挟制了整个学校,导致风 ...

  8. 硬件IIC驱动原理

    1.IIC物理层 IIC通信属于同步半双工通信,IIC总线由两根信号线组成.一根是数据线SDA,一根是时钟线SCL,时钟线只能由主机发送给从机,数据线可以双向进行通信,总线上可挂载多个设备,挂载数量受 ...

  9. java代码审计的点

    java代码审计的点 组件的审计 首先看pom.xml查看第三方组件和第三方组件的版本 常用的第三方组件: 第三方组件 漏洞类型 组件漏洞版本 log4j2 远程代码执行 Apache log4j2 ...

  10. 第五十七篇：webpack打包发布

    好家伙,到了打包发布这一步了 1.配置打包命令: 在package.json 文件的 scripts 节点下,新增 build 命令如下: "scripts": { "d ...