java ajax增删改查_springMvc+AJAX+JSON的增删改查

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>

My JSP 'list.jsp' starting page

//点击两次可以关闭窗口

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

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("修改失败");

}

});

}

菜品名	菜品价格	操作

新增

菜品名：

价格：

修改

菜品名：

价格：

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> 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> 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);

}

}

---------------------

原文：https://blog.csdn.net/panhaigang123/article/details/78595575