2、第二种传输数据的形式：使用ajax传输数据，将前台的数据传输到后端

Mr.Aholic

已于 2022-06-25 13:20:19 修改

阅读量539

点赞数 1

分类专栏： jsp从入门到实战文章标签： ajax java

于 2021-09-16 19:25:55 首次发布

本文链接：https://blog.csdn.net/weixin_43304253/article/details/120335657

版权

jsp从入门到实战专栏收录该内容

29 篇文章 7 订阅

订阅专栏

第一种使用form表单中的action形式传输数据：https://blog.csdn.net/weixin_43304253/article/details/120335282

前端页面

<%--
  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="" action="">
  <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;
    }

    $.ajax({
      url:"login",
      type:"post",
      data:{
        id:id,
        pwd:pwd
      },
      success:function (){

      }

    })


  }


</script>

</body>
</html>

servlet层

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


    }
}

在这里插入图片描述

Mr.Aholic

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
2、第二种传输数据的形式：使用ajax传输数据，将前台的数据传输到后端

前端页面<%-- 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>
复制链接

扫一扫