操作界面:
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%--
Created by IntelliJ IDEA.
User: DELL
Date: 2018/8/3
Time: 17:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="ppa">
<table border="1" name="tbl">
<tr>
<th>姓名</th>
<th>序号</th>
<th>操作1</th>
<th>操作2</th>
</tr>
<tr v-for="(value,key) in heros">
<td>{{key}}</td>
<td>{{value}}</td>
<td v-on:click="dodelet(key)">删除</td>
<td v-on:click="dochange(key)">修改</td>
</tr>
</table>
<form>
姓名:<input type="text" v-model="heroname" id="heroname" placeholder="请输入姓名"/><br/>
序号:<input type="text" v-model="heronum" id="heronum" placeholder="请输入序号"/><br/>
<button type="button" v-on:click="dosubmit()">添加</button>
</form>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#ppa",
data:{
heroname:"",
heronum:"",
heros:{},
inited:true,
newname:"",
newnum:""
},
methods:{
dosubmit:function () {
var data = {};
data.heroname = this.heroname;
data.heronum = this.heronum;
console.log(this.heroname);
console.log(this.heronum);
var url = "save.jsp";
//使用键值对参数进行提交
var paras = new URLSearchParams();
paras.append("heroname",data.heroname);
paras.append("heronum",data.heronum);
paras.append("heros",data.heros);
//使用post方法提交
if(vue.inited){
vue.inited=false;
vue.heros=data.heros;
return;
}
axios.post(url,paras).then(function (result) {
console.log(result);
if(result.data.msg.indexOf('添加失败')>=0){
alert('信息重复添加失败');
}else{
alert('添加成功');
vue.heros=result.data.heros;
}
}).catch(function (reason) {
console.log(reason);
});
},
dodelet:function (heroname) {
var data = {};
console.log(heroname);
data.heroname = heroname;
var url = "dodelet.jsp";
//使用键值对参数进行提交
var paras = new URLSearchParams();
paras.append("heroname",data.heroname);
//使用post方法提交
axios.post(url,paras).then(function (result) {
console.log(result);
if(result.data.msg.indexOf('删除成功')>=0){
vue.heros=result.data.heros;
}
}).catch(function (reason) {
console.log(reason);
});
},
dochange:function (heroname) {
var data = {};
var newnum="";
var newname = window.prompt("请输入新的姓名");
if(newname){
newnum = window.prompt("请输入新的序号");
if(newnum){
data.heroname = heroname;
data.newname = newname;
data.newnum = newnum;
var url = "dochange.jsp";
//使用键值对参数进行提交
var paras = new URLSearchParams();
paras.append("heroname",data.heroname);
paras.append("newname",data.newname);
paras.append("newnum",data.newnum);
//使用post方法提交
axios.post(url,paras).then(function (result) {
console.log(result);
if(result.data.msg.indexOf('修改成功')>=0){
alert("修改成功")
vue.heros=result.data.heros;
}else{
alert("修改失败");
vue.heros=result.data.heros;
}
}).catch(function (reason) {
console.log(reason);
});
}
}
}
},
mounted: function () {
this.dosubmit();
}
});
</script>
</html>
处理增加的jsp文件:
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %>
<%--
Created by IntelliJ IDEA.
User: DELL
Date: 2018/8/3
Time: 18:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String heroname = request.getParameter("heroname");
String heronum = request.getParameter("heronum");
System.out.println("接收");
System.out.println(heroname);
System.out.println(heronum);
Map<String,String> map = (HashMap)application.getAttribute("herodata");
//创建json对象,用于发送返回信息
JSONObject json=new JSONObject();
if(map==null){
map=new HashMap();
map.put(heroname,heronum);
application.setAttribute("herodata",map);
json.put("msg","添加成功");
}else{
if(map.containsValue(heronum)||map.containsKey(heroname)){
json.put("msg","添加失败");
}else{
//添加hero
map.put(heroname,heronum);
json.put("msg","添加成功");
}
}
json.put("heros",map);
out.println(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
%>
处理删除的JSP文件:
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %>
<%--
Created by IntelliJ IDEA.
User: DELL
Date: 2018/8/3
Time: 19:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String heroname = request.getParameter("heroname");
Map<String,String> map = (HashMap)application.getAttribute("herodata");
//创建json对象,用于发送返回信息
JSONObject json=new JSONObject();
if(map.containsKey(heroname)){
map.remove(heroname);
json.put("msg","删除成功");
application.setAttribute("herodata",map);
}
json.put("heros",map);
out.println(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
%>
处理修改的JSP界面:
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %>
<%--
Created by IntelliJ IDEA.
User: DELL
Date: 2018/8/3
Time: 20:07
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String heroname = request.getParameter("heroname");
String newname = request.getParameter("newname");
String newnum = request.getParameter("newnum");
Map<String,String> map = (HashMap)application.getAttribute("herodata");
String heronum = map.get(heroname);
//删除选中对象
map.remove(heroname);
//创建json对象,用于发送返回信息
JSONObject json=new JSONObject();
if (map.containsValue(newnum)||map.containsKey(newname)){
json.put("msg","修改失败");
map.put(heroname,heronum);
application.setAttribute("herodata",map);
}else{
map.put(newname,newnum);
json.put("msg","修改成功");
application.setAttribute("herodata",map);
}
json.put("heros",map);
out.println(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
%>