SSM+AJAX+jsp添加数据功能

最新推荐文章于 2022-07-26 20:45:09 发布
最新推荐文章于 2022-07-26 20:45:09 发布
阅读量548 收藏 4
点赞数 2
分类专栏： # SSM框架 文章标签： bootstrap ajax jquery ssm jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44828720/article/details/118023831
版权

2021.5.7_SSM+AJAX开发，添加功能

1.StudentMapper

package com.hy.mapper;

import com.hy.entity.Student;

import java.util.List;

public interface StudentMapper {

    //判断学号是否存在
    public Student selectSId(String studentId);

    //添加
    public int addStudent(Student student);


}

StudentMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hy.mapper.StudentMapper">

 
    <!--判断学号是否重复-->
    <select id="selectSId" parameterType="String" resultType="Student">
        select * from student where studentId = #{studentId};
    </select>

    <!--添加-->
    <insert id="addStudent" parameterType="com.hy.entity.Student">
        insert into student (studentId,studentName,college,major,className) values
                    (#{studentId},#{studentName},#{college},#{major},#{className})
    </insert>

</mapper>

2.StudentService

package com.hy.service;

import com.hy.entity.Student;

import java.util.List;

public interface StudentService {

    //判断学号是否存在
    public boolean selectSId(String studentId);

    //添加
    public int addStudent(Student student);

}

3.StudentServiceImpl

package com.hy.service;

import com.hy.entity.Student;
import com.hy.mapper.StudentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentServiceImpl implements StudentService{

    @Autowired
    private StudentMapper studentMapper;

    //判断学号是否存在
    @Override
    public boolean selectSId(String studentId) {
        Student stuId = studentMapper.selectSId(studentId);
        if (stuId != null){
            return false;
        }
        return true;

    }

    //添加
    @Override
    public int addStudent(Student student) {
        return studentMapper.addStudent(student);
    }

}

4.StudentController

package com.hy.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hy.entity.Student;
import com.hy.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;

@Controller
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private StudentService studentService;

    //判断学号
    @ResponseBody //此注解是返回JSON字符串
    @RequestMapping("/selectSId")
    public boolean selectSId(String studentId){
        boolean flag = studentService.selectSId(studentId);
        return flag;
    }

    //添加
    @ResponseBody
    @RequestMapping("/addStudent")
    public String addStudent(@RequestBody Student student){
       return studentService.addStudent(student)>0? "success":"error";
    }

}

5.jsp

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/5/5
  Time: 16:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Student</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <%--jQuery需要在bootstrap.前面--%>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .form-inline .form-group .btn{
              outline: none;
          }

        .table{
            text-align: center;
            margin-top: 10px;
        }
        .alert{
            display: none;
            width: auto;
            text-align: center;
            position: fixed;
            top: 20%;
            left:50%;

        }
        #delete_success,#add_success,#update_success{
            background:#19be6b;
            color: #ffff;
        }
        #delete_cancel,#add_cancel,#update_cancel{
            background: #ed4014;
            color: #ffffff;
        }
    </style>
</head>
<body>

<%--添加开始--%>
<div class="modal fade" id="addStudent" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header" style="background:#515a6e;border-radius:15px 15px 0 0;color: #ffffff">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="color: #ffffff">&times;</span>
                </button>
                <h4 style="text-align: center">添加</h4>
            </div>
            <div class="modal-body">
                <form  class="form-horizontal" id="myForm">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">学号:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="addStudentId"  name="studentId" ><span id="msg"></span><br>
                        </div>
                    </div>
                    <p></p>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">姓名:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="addStudentName" name="studentName" >
                        </div>
                    </div>
                    <p></p>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">学院:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="addCollege" name="college" >
                        </div>
                    </div>
                    <p></p>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">专业:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="addMajor" name="major" >
                        </div>
                    </div>
                    <p></p>

                    <div class="form-group">
                        <label class="col-sm-4 control-label">班级:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="addClassName" name="className" >
                        </div>
                    </div>
                    <p></p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"  id="add_ok" data-toggle="modal" data-target="#addStudent">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel_add">取消</button>
            </div>
        </div>
    </div>
</div>
<%--添加结束--%>

<%--提示框开始--%>
<div class="alert alert-success" id="delete_success" role="alert">
    <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp;删除成功
</div>
<div class="alert alert-danger" id="delete_cancel" role="alert">
    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;已取消删除
</div>
<div class="alert alert-success" id="add_success" role="alert">
    <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp;添加成功
</div>
<div class="alert alert-danger" id="add_cancel" role="alert">
    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;已取消添加
</div>
<div class="alert alert-success" id="update_success" role="alert">
    <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp;修改成功
</div>
<div class="alert alert-danger" id="update_cancel" role="alert">
    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;已取消修改
</div>
<%--提示框结束--%>
</body>
<script>

    /*失去焦点交互数据*/
    $(function (){
        $("#addStudentId").blur(function (){ /*blur失去焦点*/
            var studentId = $("#addStudentId").val();
            if(studentId != ""){
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/student/selectSId",
                    data:{"studentId":studentId},
                    dataType:"json",
                    success:function (data){
                        if (data) {
                            $("#msg").text("学号可以用");
                            $("#addStudentId").css('borderColor','green');
                            $("#msg").css('color','green')

                        }
                        else{
                            $("#msg").text("学号已被占用");
                            $("#addStudentId").css('borderColor','red');
                            $("#msg").css('color','red')
                        }
                    }
                });
            }
            else{
                $("#msg").text("");
            }
        });
        $("#add_ok").click(function (){
            var studentId = $("#addStudentId").val();
            var studentName = $("#addStudentName").val();
            var college = $("#addCollege").val();
            var major = $("#addMajor").val();
            var className = $("#addClassName").val();
            var m = $("#msg").text();
            if (m == "学号可以用"){
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/student/addStudent",
                    data:JSON.stringify({
                        "studentId":studentId,
                        "studentName":studentName,
                        "college":college,
                        "major":major,
                        "className":className}),
                    dataType: "text",
                    contentType: "application/json;charset=utf-8",
                    success:function (msg){
                        if(msg == "success"){
                            $("#addStudentId").val("");
                            $("#addStudentName").val("");
                            $("#addCollege").val("");
                            $("#addMajor").val("");
                            $("#addClassName").val("");
                            $("#msg").val("");
                            select();
                            $("#add_success").show().delay(1500).fadeOut();
                        }
                    }
                });
            }
            else if(m == "学号已被占用"){
                $("#addStudentId").val("");
                $("#addStudentName").val("");
                $("#addCollege").val("");
                $("#addMajor").val("");
                $("#addClassName").val("");
                $("#msg").text("");
            }

        });
        $("#cancel_add").click(function (){
            $("#addStudentId").val("");
            $("#addStudentName").val("");
            $("#addCollege").val("");
            $("#addMajor").val("");
            $("#addClassName").val("");
            $("#msg").text("");
            $("#add_cancel").show().delay(1500).fadeOut();
        })
    });
    /*添加结束*/

</script>
</html>
[猫玖]
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除
01-08
基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+...
ssm+ajax实现新增和修改(layerui后台系统模板)
qq_38337245的博客
12-07 3312
最近使用layerui后台模板实现的一个新增和修改，大家looklook、、、、、 一、jsp页面 admin_list.jsp页面，该页面显示数据（代码太多了，我就只写一部分就行了）  添加：onclick="addAdmin()" ，调用admin.js中的函数 &lt;a title="添加" href="javascript:;" onclick="addAdmin()" ...
SSM + Ajax
m0_51945098的博客
12-22 2343
1.创建数据库 2.创建工程，目录，导入jquery类库，并导入pom依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.c
java ssm批量插入数据_怎么实现批量插入数据。ajax+ssm
weixin_31173113的博客
02-28 459
小弟最近再做一个东西，这个就是实现用户可以填写表单的功能。一个用户只有创建一个单号的数据，但是一个用户可以添加很多货物，然后点击创建，并传入数据库。我现在有两个表，上面的表单是一个表，下面的是一个表。怎么实现点击创建按钮后可以一对多的插入数据库呢？要是单独的上面一个表单那很容易，但是现在下面可以有很多条数据，该怎么实现？小弟用的是ssm框架，前段用的是ajax，jqu ery。 前端代码这里就不贴...
SSM框架下实现增加功能
weixin_30664051的博客
11-15 1141
　　增加功能作为四大基础功能之一，肯定难度不高，作为入门级操作，我们还是直接看代码吧QAQ。 1.Mapper.xml 　　首先从xml着手，把相应的sql语句写好，由于主键在数据库中是自增长，我这里采用的就是下面这个select： <!-- 新增方法 --> <insert id="insertAdminuser" parameterType="dz.entit...
ssm+ajax批量新增
allen19840920的博客
05-28 273
新手码农一个，主要用于代码的记录方便代码的复用性（自用） HTML（全部要上传其实主要看js） <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://jav...
Java Web登录Demo（SSM+Ajax）
01-20
demo主要运用SSM框架完成用户的登录功能；demo集成了MyBatis反向生成工程；demo的后台运用了spring的自动注入、springMVC的请求驱动、MyBatis面向接口数据库编程技术；JSP前台和后台交互的响应模式；
Java项目:茶叶商城管理系统(java+SSM+JSP+Ajax+jQuery+Mysql)
07-06
项目介绍 该项目为前后台项目，分为普通用户与管理员两种角色，前台普通用户...2. 前端：JSP+jQuery+Ajax 使用说明 1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件； 2. 使用IDE
Java项目:水果店商城超市系统(java+SSM+JSP+Ajax+jQuery+Mysql)
07-01
项目介绍 该项目为前后台项目，分为普通用户与管理员两种角色，前台...2. 前端：JSP+jQuery+Ajax 使用说明 1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件； 2. 使用IDEA/Eclipse
java SSM项目基础(day 5)[实现用户添加功能(注册)]
chen_cm的博客
08-02 909
既然是用户添加，我们不妨写个注册用户。 目录 思路整理 代码编写 前端页面 Register.jsp 后端代码 Service层 Controllor层 GitHub 思路整理 我们还是以 前端页面→Service层→Controllor层→前端页面 的思路来整理。 注册和登录区别不大，一样是用表单提交数据，唯一不同的是，注册是直接插入数据库，而登录是与数据库里进行比...
SSM框架学习笔记——连接数据库以及简单的jsp
xiaofeine的博客
03-26 4293
相信大家都知道，现在做什么都离不开数据库。 今天我们用的是mysql。 打开mysql 新建数据库 shop 点击数据库shop 在下面表上右击点击新建表user 然后就是往表里添加数据了。 之后再eclipse里面配置信息 进行链接数据库。 连接上数据库就可以像数据库里添加 修改 删除 数据了。 SSM框架是一个完整的前端加后端的体系，现在说一下jsp。 具体如下： <%@ page l...
SSM整合（二）查询数据、添加数据
想握住此生辽阔
07-29 1727
编写Dao和Service 先在domain下编写实体类Student package com.bipowernode.domain; public class Student { private Integer id; private String name; private Integer age; public Integer getId() { return id; } public void setId(Integer id)
SSM项目（一）Day04新增员工与级联查询（ajax技术）
程序彤的博客
01-11 132
使用ajax新增员工js代码（index.jsp） // 添加员工按钮 $("#emp_add_modal_btn").click(function () { // 发送ajax请求，查询部门信息，以便显示在下拉列表中 getDept(); // 弹出模态框 $("#empAddModal").modal({ backdrop:'static' }) }); // 查询出部门
以JSP为视图解析器搭建SSM项目
心有—林夕的博客
07-26 755
ssm,jsp,mavaen
SSM利用ajax实现新增功能
六月星海的博客
03-17 1435
1.实体类 1.1com.airQuality.entity包中 /** * 空气质量实体类 * * @author Administrator * */ public class AirQualityIndex { // 属性 private Integer id; private Integer district_id; private Str...
java ajax实现增删改查,03.bootstrap+Ajax+SSM(maven搭建)实现增删改查
weixin_42114645的博客
03-13 686
功能点：分页数据校验ajaxRest风格的URI：使用HTTP协议请求方式的动词，来表示对资源的操作(GET(查询)，POST(新增)，PUT(修改)，DELETE(删除))技术点基础框架-ssm数据库mysql前端框架-bootstrap项目依赖 -Maven分页 -pagehelper逆向工程-Mybatis Generator实现效果添加按钮弹出模态框编辑按钮弹出模态框删除基础环境搭建1)新...
关于ajax 返回的json数据动态展现在jsp页面的问题 20170525
弹吉他的ZTT的博客
05-25 562
最近项目需要将动态获得列表数据，并且展现到页面相应的地方下面展示代码：
SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）
Codingzhangxin的博客
04-05 676
SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）       前端新增页面的模态框，采用bootstarp建立。定义了empName，email，gender，depatName，四个属性的ID；其中保存按钮的ID：emp_save_btn,对应的点击函数如下：    $("#emp_save_btn").click(fu...
使用ssm框架 通过ajax异步提交数据具体实现方法
热门推荐
我是一只小菜鸟的博客
03-23 1万+
以前是一名php开发人员，最近公司开始一个java开发的erp项目，从新学起的感觉倍爽，各种问题各种遇到，从通过ajax异步提交数据具体实现方法这里开始，以后在博客上慢慢呈现，话不多说，下面就是我通过springMvc和ajax异步实现数据更新的解决方法。 虽然网上已经有好多的解决的方法，但是一直拿来试用并不好用，所以提供以下自己的方法。 以简易的添加方法为例 在controller中的
SSM+SHRIO+AJAX+MD5的登录详细代码
最新发布
06-11
以下是基于SSM+Shiro+Ajax+MD5的登录的详细代码： 1. 前端页面代码 login.jsp ```html <!DOCTYPE html> 登录 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 登录 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

[猫玖]

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值