（练习SSMdemo）使用异步交互 实现增删查改

原创 于 2019-08-24 14:41:42 发布 · 993 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文通过一个DEMO展示了如何在SSM（Spring、SpringMVC、MyBatis）框架中实现异步交互，涵盖从数据库查询数据、添加页面、修改页面的控制器层关键代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

demo 结构图
在这里插入图片描述
核心代码

从数据库查询数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="500" cellspacing="0">

		<thead>
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>类别</th>
				<th>价格</th>
				<th>库存</th>
				<th>描述</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>

		</tbody>
		<a href="${pageContext.request.contextPath}/add.jsp">添加 </a>>
	</table>
	


</body>
<script type="text/javascript">
 	if("${msg}"){
 		alert("${msg}")
 		
 	}
 	//异步读取数据
 $.getJSON ("${pageContext.request.contextPath}/findGoods.do",function(date){
	 for(var i=0;i<date.length;i++){
		// var test=date[i];
		 var id=date[i].id;
		 var goodsPrice=date[i].goodsPrice;
		 var goodsNumber=date[i].goodsNumber;
		 var goodsName=date[i].goodsName;
		 var goodsDesc=date[i].goodsDesc;
		 var goodsType=date[i].goodsType;
		 $("tbody").append("<tr> "
		
			+" <td>" + id + "</td>" 
			+" <td>" + goodsName + "</td>"
			+" <td>" + goodsType + "</td>"
			+" <td>" + goodsPrice + "</td>"
			+" <td>" + goodsNumber + "</td>"
			
			+" <td>" + goodsDesc + "</td>"
			+" <td>" + "<a href=\"${pageContext.request.contextPath}/edit.jsp?id="+id+"\">修改</a>"
					+"  "+
			"<a href='${pageContext.request.contextPath}/deleteByid.do?id="+id+"'>删除</a>"+"</td>"
			
			+"</tr>")
	 }
	 
 });
 
</script>
</html>

添加页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	<form id="productForm" enctype="multipart/form-data">
	 商品姓名：<input id="name" name="goodsName" value=""type="text" />
	<br />
	商品类别:<select id="select" name="goodsType"><option value="">请选择</option></select>
	<br />
	<!-- 商品类别<input id="type" name="type" value="" type="text" />  -->
	<br />
	价格<input id="price" name="goodsPrice" value="" type="text" />
	<br />
	库存<input id="number" name="goodsNumber" value="" type="text" />
	<br />
	描述<textarea id="desc" name="goodsDesc"></textarea>
	<br />

	<input type="submit" value="保存"/> </from>
	
<!--查询商品类型  -->
<script type="text/javascript">
$.getJSON("${pageContext.request.contextPath}/findGoodsType.do", function(
		date) {
	//alert("11");
	for (i = 0; i < date.length; i++) {
		$("select").append(
				"<option value='" + date[i].typeName + "'>" + date[i].typeName
						+ "</option>")

	}
	//alert("11");

}); </script>

</body>
</html>

修改页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	<form id="productForm" enctype="multipart/form-data">
	 商品姓名：<input id="name" name="goodsName" value=""type="text" />
	<br />
	商品类别:<select id="select" name="goodsType"><option value="">请选择</option></select>
	<br />
	<!-- 商品类别<input id="type" name="type" value="" type="text" />  -->
	<br />
	价格<input id="price" name="goodsPrice" value="" type="text" />
	<br />
	库存<input id="number" name="goodsNumber" value="" type="text" />
	<br />
	描述<textarea id="desc" name="goodsDesc"></textarea>
	<br />
	<input type="hidden"  name="id" value="${param.id}" />
	<input type="submit" value="保存"/> </from>
	${param.id}

</body>

//查询商品类型
<script type="text/javascript">
	$.getJSON("${pageContext.request.contextPath}/findGoodsType.do", function(
			date) {
		//alert("11");
		for (i = 0; i < date.length; i++) {
			$("select").append(
					"<option value='" + date[i].typeName + "'>" + date[i].typeName
							+ "</option>")

		}
		//alert("11");

	}); 
//将修改前表的信息填入表单中
	 $.getJSON(
			"${pageContext.request.contextPath}/${param.id}/findGoodsByid.do",
			function(date) {
				//alert("11");
				$("#name").attr("value", date.goodsName);
				//$("#type").attr("value", date.goodsType);
				$("#price").attr("value", date.goodsPrice);
				$("#number").attr("value", date.goodsNumber);
				$("#desc").val(date.goodsDesc);
			}); 
/*  
	$("#fromAjax").ajaxForm({
		url: 'updateGoodsByid.do',
		type: 'post',
		dataType: 'json',
		async: true,
		success: function(responseJson){ 
			alert("修改成功")
		}
	});   */
	//获取获取表单
	$("#productForm").ajaxForm({
		url: "${pageContext.request.contextPath}/updateGoodsByid.do",
		type: 'post',
		dataType: 'json',
		async: true,
		success: function(responseJson){ // 请求成功
	   /*  	var st = responseJson.status;
			var msg = responseJson.msg;
			
			// 添加成功后，跳转到查询查询页面
			if (st == 'success') {
				location.href = 'listProduct.html';
			} */
			alert("数据更新成功！");
			location.href="list.jsp";
			//location.href = 'listProduct.html'
	    },
	    error: function(){ // 请求失败
	    	alert("数据加载失败！");
	    }
		
	});

</script>
</html>

controller层

package com.chinasofiti.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.chinasofiti.beans.Goods;
import com.chinasofiti.service.IUserSevice;

@Controller
public class GoodsController {
	@Autowired
	IUserSevice userService;
	
	@RequestMapping(path="/findGoods.do",produces={"application/json;charset=utf-8"})
	@ResponseBody
	public List<Goods> findGoods() {
//		List<Goods> userList = new ArrayList<Goods>();
//		userList.add(new Goods(110, 10, 110,"asda","asdas","sdss"));
//		userList.add(new Goods(1101, 102, 110,"asda","asdas","sdss"));
//		userList.add(new Goods(1101, 120, 1130,"assssda","aghhsdas","sdss"));
		return userService.findGoods();
		//return  userList;
	}
	
	
	@RequestMapping(path="/{id}/findGoodsByid.do" ,produces= {"application/json;charset=utf-8"})
	@ResponseBody
	public Goods findGoodsByid(@PathVariable("id")int id) {
		
		
		System.out.println(id);
		
		return userService.findGoodsByid(id);
		
		
		
	}
	@RequestMapping(path="/updateGoodsByid.do",produces= {"application/json;charset=utf-8"})
	@ResponseBody
	public Map<String, String> updateGoodsByid(Goods goods) {
		System.out.println(goods.getGoodsName());
		System.out.println(goods.getGoodsType());
		Map<String, String> responseMap = new HashMap<String, String>();
		responseMap.put("suceess", "1");
		userService.updateGoodsByid(goods);
		return responseMap;
		 
	}

	@RequestMapping(path="/deleteByid.do",produces= {"application/json;charset=utf-8"})

	//
	//HttpServletRequest request
	public String deleteByid(@RequestParam("id") int id,Model mo) {
		//String id = request.getParameter("id");
		System.out.println(id);
		userService.deleteByid(id);
	
		mo.addAttribute("msg", "删除成功");
		return "list";
	
		
		}
	
		 
	
	

}
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值