在 SSM 中使用 Ajax 进行数据传递

最新推荐文章于 2021-09-06 00:16:00 发布

HeatDeath

最新推荐文章于 2021-09-06 00:16:00 发布

阅读量1.1w

点赞数 3

分类专栏： SSM实践 SSM学习笔记文章标签： ajax

本文为博主原创文章，未经博主允许不得转载。哈哈哈

本文链接：https://blog.csdn.net/HeatDeath/article/details/78446951

版权

SSM学习笔记同时被 2 个专栏收录

29 篇文章 11 订阅

订阅专栏

SSM实践

7 篇文章 1 订阅

订阅专栏

前端页面

addCourse.jsp

注意提交按钮的 type 应该为 button，不能为 submit！

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <!-- 引入JQuery  bootstrap.js-->
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.form.js"></script>

</head>
<body>
<!-- 顶栏 -->
<jsp:include page="top.jsp" />
<!-- 中间主体 -->
<div class="container" id="content">
    <div class="row">
        <jsp:include page="menu.jsp" />
        <div class="col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <h1 style="text-align: center;">添加课程信息</h1>
                    </div>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/admin/addCourse" id="editForm" method="post">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">课程号</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="inputEmail3" name="courseid" placeholder="请输入课程号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">课程名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputPassword3" name="coursename" placeholder="请输入课程名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label" name="grade">授课老师编号</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="teacherid">
                                    <c:forEach items="${teacherList}" var="item">
                                        <option value="${item.userid}">${item.username}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">上课时间</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="coursetime" placeholder="请输入上课时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">上课地点</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="classroom" placeholder="上课地点">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">周数</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="courseweek" placeholder="请输入周数">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label" name="coursetype">课程的类型：</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="coursetype">
                                    <option value="必修课">必修课</option>
                                    <option value="选修课">选修课</option>
                                    <option value="公共课">公共课</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label" name="grade">所属院系</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="collegeid">
                                    <c:forEach items="${collegeList}" var="item">
                                        <option value="${item.collegeid}">${item.collegename}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">学分：</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="score" placeholder="请输入学分">
                            </div>
                        </div>
                        <div class="form-group" style="text-align: center">
                            <button class="btn btn-default" type="button" id="submitAddCourseForm">提交</button>
                            <button class="btn btn-default" type="reset">重置</button>
                        </div>
                    </form>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="container" id="footer">
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    $("#submitAddCourseForm").click(function () {
        $('#editForm').ajaxSubmit({
            dateType: 'json',
            success: function (respText) {
                respText = $.parseJSON(respText);
                if (respText.msg == "fail"){
                    alert("课程号重复！添加失败！");
                }else {
                    alert("成功添加课程！");
                }
                window.location.href = "${pageContext.request.contextPath}" + respText.page_url;

            }
        })
    })
</script>
</html>

后端控制器

xxxController.java

@ResponseBody 作用:

该注解用于将Controller的方法返回的对象，根据HTTP Request Header的Accept的内容,通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。返回的数据不是html标签的页面，而是其他某种格式的数据时（如json、xml等）使用.

// 添加课程表单处理
    @ResponseBody
    @RequestMapping(value = "/addCourse", method = RequestMethod.POST)
    public String doAddCourse(CourseCustom courseCustom) throws Exception{

        Boolean result = courseService.save(courseCustom);
        Map<String, Object> resultMap = new HashMap<>();

        if (result){
            resultMap.put("msg", "success");
            resultMap.put("page_url", "/admin/showCourse");
        }else {
            resultMap.put("msg", "fail");
            resultMap.put("page_url", "/admin/addCourse");

        }
        return JSON.toJSONString(resultMap);
    }

HeatDeath

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
在 SSM 中使用 Ajax 进行数据传递

前端页面addCourse.jsp注意提交按钮的 type 应该为 button，不能为 submit！<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html><htm
复制链接

扫一扫