<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'list.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

<script type="text/javascript">

//点击两次可以关闭窗口
var flag=true;
function a(){
if(flag){
document.getElementById("addDiv").style.display='none';
flag=false;
}else{
document.getElementById("addDiv").style.display='block';
flag=true;
}
}

//封装了重复的代码 rul：请求的路径 methodType：请求的方式 param：参数 retnFunction：请求有返回的结果的回调函数
function sendAjax(url,methodType,param,retnFunction){
var xmlhttp=null;
//兼容所有的浏览器 创建XHR对象
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
retnFunction(xmlhttp.responseText);
}
}

if(methodType=="get"||methodType=="GET"){
xmlhttp.open("GET",url+"?"+param,true);
xmlhttp.send();
}else{
xmlhttp.open("POST",url,true);
//charset=UTF-8 解决乱码问题
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send(param);
}
}

//查询和删除
function query() {
var foodname=document.getElementsByName("foodName")[0].value;
sendAjax("${pageContext.request.contextPath}/popo","GET","foodname="+foodname,function(responseText){
var resultJson=responseText; //返回一个json字符串
//转化为json对象 返回为一个集合
var resultObj=JSON.parse(resultJson);
//获取表格id为myTable对象
var table=document.getElementById("myTable");
//获取所有的name为dataTr的tr
var allDataTr=document.getElementsByName("dataTr");
for(var i=0;allDataTr.length;i++){
//数组是动态变化的 删了第一个 第二个会变成第一个
table.removeChild(allDataTr[0]);//防止第二次查询展示出重复的数据
}

//展示查询的结果
for(var i=0;i<resultObj.length;i++){
var obj=resultObj[i];

//获取td对象
var td=document.createElement("td");
//设值
td.innerText=obj.foodName;
var td1=document.createElement("td");
td1.innerText=obj.price;
//获取一个td对象
var td2=document.createElement("td");

//删除按钮
var ib=document.createElement("button");
ib.innerText="删除";
td2.appendChild(ib);

//修改按钮
var ib1=document.createElement("button");
ib1.innerText="修改";
td2.appendChild(ib1);

//获取tr对象
var tr=document.createElement("tr");
//把获取的对象绑定在button按钮上
ib.foodObj=obj;
//把tr绑定在button按钮上
ib.myLineTr=tr;
//删除的事件
ib.addEventListener("click",function(){
//获取当前按钮
var eventSrc=event.srcElement;
table.removeChild(eventSrc.myLineTr);

sendAjax("${pageContext.request.contextPath}/deleteFood/"+eventSrc.foodObj.foodid,"POST","_method=delete",function(responseText){
if(responseText==1){
alert("删除成功");
}else{
alert("删除失败");
}
})
});

//修改的事件
ib1.foodObj=obj;
ib1.addEventListener("click",function(){
//获取当前按钮
var eventSrc=event.srcElement;
//显示窗口
document.getElementById('updateDiv').style.display='block';
document.getElementsByName("umyFoodName")[0].value=eventSrc.foodObj.foodName;
document.getElementsByName("umyFoodPrice")[0].value=eventSrc.foodObj.price;
document.getElementsByName("umyFoodid")[0].value=eventSrc.foodObj.foodid;
});
//给tr标签设一个标识
tr.setAttribute("name","dataTr");
//在tr追加td
tr.appendChild(td);
tr.appendChild(td1);
tr.appendChild(td2);
//把tr追加到table后
table.appendChild(tr);
}
});
}

//新增
function saveFood(){
var myFoodName=document.getElementsByName("myFoodName")[0].value;
var myFoodPrice=document.getElementsByName("myFoodPrice")[0].value;
sendAjax("${pageContext.request.contextPath}/saveFood","POST","foodname="+myFoodName+"&price="+myFoodPrice,function(responseText){
if(responseText==1){
alert("新增成功");
document.getElementById('addDiv').style.display='none';
query();
}else{
alert("新增失败");
}
});
}

function updateFood(){
var umyFoodName=document.getElementsByName("umyFoodName")[0].value;
var umyFoodPrice=document.getElementsByName("umyFoodPrice")[0].value;
var umyFoodid=document.getElementsByName("umyFoodid")[0].value;

sendAjax("${pageContext.request.contextPath}/updateFood/"+umyFoodid,"POST","_method=put&foodname="+umyFoodName+"&price="+umyFoodPrice,function(responseText){
if(responseText==1){
alert("修改成功");
document.getElementById('updateDiv').style.display='none';
query();
}else{
alert("修改失败");
}
});
}
</script>

</head>

<body>
<input type="text" name="foodName">
<input type="button" value="提交" onclick="query()"> <input type="button" value="新增" onclick="a()">
</body>

<table id="myTable">
<tr><th>菜品名</th><th>菜品价格</th><th>操作</th></tr>
</table>

<!-- 新增弹出的窗口 -->
<div id="addDiv" style="display:none;position:absolute;left:40%;top:40%;z-index:100;border:1px solid black; width:200px;height:200px">
              新增<br/>
菜品名：<input type="text" name="myFoodName"/><br/>
价格：<input type="text" name="myFoodPrice"/><br/>
<input type="button" value="保存" onclick="saveFood()"/><input type="button" value="关闭" onclick="a()"/>
</div>

<!-- 修改弹出的窗口 -->
<div id="updateDiv" style="display:none;position:absolute;left:40%;top:40%;z-index:100;border:1px solid black; width:200px;height:200px">
              修改<br/>
<input type="hidden" name="umyFoodid"/>
菜品名：<input type="text" name="umyFoodName"/><br/>
价格：<input type="text" name="umyFoodPrice"/><br/>
<!-- onclick点击事件关闭窗口 -->
<input type="button" value="确定" onclick="updateFood()"/><input type="button" value="关闭" onclick="document.getElementById('updateDiv').style.display='none'"/>
</div>
</html>

cltroller层

package cn.et.springmvc.lesson06.controller;

import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import cn.et.springmvc.lesson06.dao.MyFoodDapImpl;

@Controller
public class MyFoodController {
@Autowired
MyFoodDapImpl mdi;
//查询
@RequestMapping(value="/popo",method=RequestMethod.GET)
public String queryFood(String foodname, OutputStream os) throws UnsupportedEncodingException, IOException{
List<Map<String, Object>> queryAllFood = mdi.queryAllFood(foodname);
JSONArray arry=JSONArray.fromObject(queryAllFood);
String j=arry.toString();
os.write(j.getBytes("UTF-8"));
return null;
}

//删除
@RequestMapping(value="/deleteFood/{foodid}",method=RequestMethod.DELETE)
public String deleteFood(@PathVariable String foodid, OutputStream os) throws UnsupportedEncodingException, IOException{
try{
mdi.deleteFood(foodid);
os.write("1".getBytes("UTF-8"));
}catch(Exception e){
os.write("0".getBytes("UTF-8"));
}
return null;
}

//修改
@RequestMapping(value="/updateFood/{foodid}",method=RequestMethod.PUT)
public String updateFood(@PathVariable String foodid,String foodname,String price, OutputStream os) throws UnsupportedEncodingException, IOException{
try{
mdi.updateFood(foodid, foodname, price);
//返回以代表成功
os.write("1".getBytes("UTF-8"));
}catch(Exception e){
//返回0代表失败
os.write("0".getBytes("UTF-8"));
}
return null;
}

//增加
@RequestMapping(value="/saveFood",method=RequestMethod.POST)
public String saveFood(String foodname,String price, OutputStream os) throws UnsupportedEncodingException, IOException{
try{
mdi.saveFood(foodname, price);
os.write("1".getBytes("UTF-8"));
}catch(Exception e){
os.write("0".getBytes("UTF-8"));
}
return null;
}
}
dao层

package cn.et.springmvc.lesson06.dao;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

@Repository
public class MyFoodDapImpl {
@Autowired
JdbcTemplate jdbc;
public List<Map<String, Object>> queryAllFood(String foodname){
String sql="select * from food where foodName like '%"+foodname+"%'";
return jdbc.queryForList(sql);
}

public void deleteFood(String foodid){
String sql="delete from food where foodid="+foodid;
jdbc.execute(sql);
}

public void saveFood(String foodname,String price){
String sql="insert into food(foodName,price) values('"+foodname+"','"+price+"')";
jdbc.execute(sql);
}

public void updateFood(String foodid,String foodname,String price){
String sql="update food set foodName='"+foodname+"',price='"+price+"' where foodid="+foodid;
jdbc.execute(sql);
}
}

springMvc+AJAX+JSON的增删改查的更多相关文章

  1. SpringMVC之简单的增删改查示例（SSM整合）

    本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...

  2. SpringMVC,MyBatis商品的增删改查

    一.需求 商品的增删改查 二.工程结构 三.代码 1.Mapper层 (1) ItemsMapperCustom.java package com.tony.ssm.mapper; import ja ...

  3. SpringMVC+SpringJdbc+SQLServer+EasyUI增删改查

    前言 前天用SpringJdbc连接了一把SQLServer,早上起来用SpringMVC+SpringJdbc+EasUI写了个增删改查的demo,主要是熟悉下SpringMVC相关知识点,如vie ...

  4. 基于SpringMVC的文件（增删改查）上传、下载、更新、删除

    一.项目背景 摘要:最近一直在忙着项目的事,3个项目过去了,发现有一个共同的业务,那就是附件的处理,附件包括各种文档,当然还有图片等特殊文件,由于时间的关系,每次都是匆匆忙忙的搞定上线,称这项目的空档 ...

  5. SpringMVC整合Hibernate实现增删改查之按条件查询

    首先我贴出我项目的结构,只完成了条件查询的相关代码,增删改没有写. 1.新建一个动态Web工程,导入相应jar包,编写web.xml配置文件 <context-param> <par ...

  6. JSP+Servlet+Ajax实现用户增删改查的例子

    一.数据库设计 用户表User 已有的测试数据 二.Java代码编写 Java EE的架构一般分为以下五层: ①.Domain ②.DAO ③.Service ④.Controller ⑤.View ...

  7. AJAX对数据库增删改查实例

    前端代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title&g ...

  8. asp.net中利用JSON进行增删改查中运用到的方法

    //asp.net中 利用JSON进行操作, //增加: //当点击“增加链接的时候”,弹出增加信息窗口,然后,在窗体中输入完整信息,点击提交按钮. //这里我们需要考虑这些:我会进行异步提交,使用j ...

  9. 基于springmvc、ajax，后台连接数据库的增删改查

    前言 前段时间在博客园上找了一个springmvc的例子,照着学了一下,算是对springmvc有了一个初步的了解,打一个基础,下面是链接.(我只看了博客,视频太耗时间了) 博客链接:http://w ...

随机推荐

  1. 带撤销并查集 & 可持久化并查集

    带撤销并查集支持从某个元素从原来的集合中撤出来,然后加入到一个另外一个集合中,或者删除该元素 用一个映射来表示元素和并查集中序号的关系,代码中用\(to[x]\) 表示x号元素在并查集中的 id 删除 ...

  2. AcWing 250 磁力快（分块）

    题目传送门 在一片广袤无垠的原野上,散落着N块磁石. 每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐标,m是磁石的质量,p是磁力,r是吸引半径. 若磁石A与磁石B的距离不 ...

  3. 2288.【POJ Challenge】生日礼物 链表+堆+贪心

    BZOJ2288 [POJ Challenge]生日礼物 题意: 给一个长度为\(n\)的数组,最多可以选\(m\)个连续段,问选取的最大值是多少 题解: 先把连续的符号相同的值合并,头和尾的负数去掉 ...

  4. 最大子阵 DP or 前缀和orb暴力 能过

    在一个给定的n*m二维矩阵中求一个子矩阵元素和的最大值. 思路: 1:一个二维矩阵由两个点可以确定,枚举两个点,取子矩阵最大值. 2:在一维矩阵中,求一个序列的最大子段,利用 f[i]=max(f[i ...

  5. 【bzoj 2467】[中山市选2010]生成树（数论--排列组合）

    题目:有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈.在中心的这个n边圈的每一条边同时也是某一个五角形的一条边,一共有n个不同的五角形.这些五角形只在五角形圈的中心的圈上有 ...

  6. Codeforces Round #577 (Div. 2) C. Maximum Median (模拟,中位数)

    题意:给你一个长度为奇数\(n\)的序列.你可以对任意元素加上\(k\)次\(1\),求操作后的中位数最大. 题解:先对序列进行排序,然后对中位数相加,如果中位数和后面的元素相等,就对后面所有和当前中 ...

  7. 三、Python基本数据类型

    一.基本算术运算(获取的结果是值) 1 a1=10 2 a2=20#初始赋值 3 a3=a1+a2 #结果30 4 a4=a2-a1 #结果10 5 a5=a1*a2 #结果200 6 a6=a2/a ...

  8. 【cpp上】课后正误小题

    State whether each of the following is true or false. If false, explain why. Assume the state ment u ...

  9. java笔试中创建String对象的思考

    题目是这样的下面那些生成新的String对象() A . String  s = new String(); B . String  s = new String("A"); C. ...

  10. shit leetcode edge testcases

    shit leetcode edge testcases Merge Intervals try "use strict"; /** * * @author xgqfrms * @ ...