在 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"%>
<html>
<head>
<title>title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<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 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);
}