第二种使用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. RestTemplate上传文件

    1.上传的文件是File类型 如果文件保存在本地,即可以通过File file = new File(path) 或者 文件路径地址获取到指定文件 public String uploadFile(F ...

  2. 从零开始Blazor Server(8)--增加菜单以及调整位置

    这篇干啥 这篇文章主要是把前面的一些东西稍微调整一下,使其更适合后面的内容. 主要是两个事,一个是把原来的PermissionEntity直接变成MenuEntity,直接让最后一级是菜单,这样后面就 ...

  3. 一文带你了解webrtc基本原理（动手实现1v1视频通话）

    webrtc (Web Real-Time Communications) 是一个实时通讯技术,也是实时音视频技术的标准和框架. 大白话讲,webrtc是一个集大成的实时音视频技术集,包含了各种客户端 ...

  4. .NET性能优化-快速遍历List集合

    简介 System.Collections.Generic.List<T>是.NET中的泛型集合类,可以存储任何类型的数据,因为它的便利和丰富的API,在我们平时会广泛的使用到它,可以说是 ...

  5. 10种有用的Linux Bash_Completion 命令示例

    摘要:我们可以对这个 bash 补全进行加速,并使用 complete 命令将其提升到一个新的水平. 本文分享自华为云社区<有用的 Linux Bash_Completion 命令示例(Ster ...

  6. Java精进-20分钟学会mybatis使用

    文字分享 希望现在的你无论有明确具体的目标还是没有,都能重视自己的需求和目标,并且常常回顾,或许可以找一个你习惯的方式写出来,挂在哪里,电脑或日记本都好.当你疲惫或迷茫的时候拿出来看一下,这在情怀领域 ...

  7. 【java】学习路线13-多态继承

    /*多态创建一个父类的对象,用子类去初始化如果要使用子类的方法,则需要把对象强制转换为子类的(xx)xxx*/public class Learn01{    public static void m ...

  8. Python入门系列（一）安装环境

    python是什么 python是一门很受欢迎的语言,除了不能生孩子以外,其它都可以做. 它擅长的领域是脚本工具和科学数据这一块,比如大数据,数据分析什么的. python安装 为了演示和验证教程可用 ...

  9. 离线方式安装高可用RKE2 (版本: v1.22.13+rke2r1)记录

    说明: 想要了解RKE2可以到官网(https://docs.rke2.io 或 https://docs.rancher.cn/docs/rke2/_index/)看最新资料 用官网给出的离线安装( ...

  10. K8S Pod及其控制器

    Pod K8S里能够运行的最小逻辑单元,1个Pod可以运行多个容器 Pod 控制器 Pod控制器是Pod启动的一种模版,用来保证在K8S中启动的Pod始终按照人们的预期运行(副本数,生命周期.健康状态 ...