第二种使用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. 用JavaScript写随机出一个颜色

    function changeColor(){ var r = parseInt(Math.random()*255) var g = parseInt(Math.random()*255) var ...

  2. 实现一个会动的鸿蒙 LOGO

    本文将带大家简单实现一个会动的鸿蒙 LOGO. emmm,写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- 产品经理:鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗 鸿蒙的 LOGO 本 ...

  3. 图解 Kafka 超高并发网络架构演进过程

    阅读本文大约需要 30 分钟. 大家好,我是 华仔, 又跟大家见面了. 上一篇作为专题系列的第一篇,我们深度剖析了关于 Kafka 存储架构设计的实现细节,今天开启第二篇,我们来深度剖析下「Kafka ...

  4. 一文带你认知定时消息发布RocketMQ

    摘要:DMS任意时间定时消息能力发布. DMS是华为云的分布式消息中间件服务.适用于解决分布式架构中的系统解耦.跨系统跨地域数据流通.分布式事务协调等难题,协助构建优雅的现代化应用架构,提供可兼容 K ...

  5. Excelize 发布 2.6.1 版本，支持工作簿加密

    Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准.可以使用它来读取.写入由 Microsoft Exc ...

  6. openjdk的bug

    容器内就获取个cpu利用率,怎么就占用单核100%了呢 背景:这个是在centos7 + lxcfs 和jdk11 的环境上复现的 下面列一下我们是怎么排查并解这个问题的. 一.故障现象 oppo内核 ...

  7. Codeforces 1503C Travelling Salesman Problem（Dynamic Programming）

    题意 大家都是优秀生,这点英文还是看得懂的:点此看题 题解 由于旅行路线成一个环,所以从哪里出发不重要,我们把景点按照 a i a_i ai​ 排序,不妨就从左边最小的出发.基础的旅行费用 c i c ...

  8. 【Java】学习路径55-练习:制作一个聊天室(多线程、UDP、双向传输数据)

    创建四个类,实现双向聊天的功能. 接收线程: import java.io.IOException; import java.net.*; public class ReceiveThread imp ...

  9. 0.web理解

    web前后端 网站的前端:通过用户肉眼看到的网站的布局内容,对网站的操作的功能,可以让用户可以直接接触与操作的部分. 用户通过访问前端的功能,前端分为 静态功能+动态功能 静态功能:静态功能则不会和后 ...

  10. Java SE final关键字

    final关键字 final可以修饰类.属性.方法和局部变量 如下情况,可以使用final 当不希望类被继承时,可以用final修饰 当不希望父类的某个方法被子类覆盖/重写(override)时,可以 ...