一、Get请求
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8" />
<title>排行榜</title>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<div id="app" class="row">
<div class="col-lg-6">
<table class=" table table-condensed table-striped ">
<tr class="row">
<td class="col-lg-6">
序号
</td>
<td class="col-lg-6">
姓名
</td>
</tr>
<tr v-for="(value,key,index) in lists" class="row">
<td class="col-lg-6">{{key}}</td>
<td class="col-lg-6">{{value}}</td>
</tr>
</table>
</div>
<div class="col-lg-6 form">
<p>
序号<input id="xuhao0" type="text" class="form-control" v-model="num"/>
</p>
<p>
姓名<input id="mingzi0" type="text" class="form-control" v-model="name"/>
</p>
<p>
<button class="btn" v-on:click="tianjia()">添加</button>
</p>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
num: "",
name: "",
op: "",
lists: {}
},
methods: {
tianjia: function () {
var data = {};
data.name = vue.name;
data.num = vue.num;
//在地址中书写键值对
var url = "./add?num="+data.num+"&name="+data.name;
//使用get方式将键值对传输过去
axios.get(url).then(function (value) {
//现在需要取得Servlet传送过来的内容
console.log(value);
vue.lists = value.data.list;
if(value.data.msg==1){
alert("添加成功")
}else{
alert("添加失败")
}
//官方建议进行错误诊断
}).catch(function (reason) {
console.log(reason);
})
}
}
})
</script>
</html>二、Post请求（键值对方式）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8" />
<title>排行榜</title>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<div id="app" class="row">
<div class="col-lg-6">
<table class=" table table-condensed table-striped ">
<tr class="row">
<td class="col-lg-6">
序号
</td>
<td class="col-lg-6">
姓名
</td>
</tr>
<tr v-for="(value,key,index) in lists" class="row">
<td class="col-lg-6">{{key}}</td>
<td class="col-lg-6">{{value}}</td>
</tr>
</table>
</div>
<div class="col-lg-6 form">
<p>
序号<input id="xuhao0" type="text" class="form-control" v-model="num"/>
</p>
<p>
姓名<input id="mingzi0" type="text" class="form-control" v-model="name"/>
</p>
<p>
<button class="btn" v-on:click="tianjia()">添加</button>
</p>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
num: "",
name: "",
op: "",
lists: {}
},
methods: {
tianjia: function () {
var data = {};
data.name = vue.name;
data.num = vue.num;
var url = "./add";
//使用这个对象来对键值对进行操作
var da = new URLSearchParams();
da.append("num",data.num);
da.append("name",data.name);
//使用post方式将键值对传输过去
axios.post(url, da).then(function (value) {
//现在需要取得Servlet传送过来的内容
console.log(value);
vue.lists = value.data.list;
if(value.data.msg==1){
alert("添加成功")
}else{
alert("添加失败")
}
//官方建议进行错误诊断
}).catch(function (reason) {
console.log(reason);
})
}
}
})
</script>
</html>
三、Post请求（JSON方式）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8" />
<title>排行榜</title>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<div id="app" class="row">
<div class="col-lg-6">
<table class=" table table-condensed table-striped ">
<tr class="row">
<td class="col-lg-6">
序号
</td>
<td class="col-lg-6">
姓名
</td>
</tr>
<tr v-for="(value,key,index) in lists" class="row">
<td class="col-lg-6">{{key}}</td>
<td class="col-lg-6">{{value}}</td>
</tr>
</table>
</div>
<div class="col-lg-6 form">
<p>
序号<input id="xuhao0" type="text" class="form-control" v-model="num"/>
</p>
<p>
姓名<input id="mingzi0" type="text" class="form-control" v-model="name"/>
</p>
<p>
<button class="btn" v-on:click="tianjia()">添加</button>
</p>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
num: "",
name: "",
op: "",
lists: {}
},
methods: {
tianjia: function () {
var data = {};
data.name = vue.name;
data.num = vue.num;
var url = "./add";
//post数据传输
axios.post(url, data).then(function (value) {
//现在需要取得Servlet传送过来的内容
console.log(value);
vue.lists = value.data.list;
if(value.data.msg==1){
alert("添加成功")
}else{
alert("添加失败")
}
//官方建议进行错误诊断
}).catch(function (reason) {
console.log(reason);
})
}
}
})
</script>
</html>统一的接收方式（使用到了commons.io包，fastjson包）
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializerFeature;
import org.apache.commons.io.IOUtils;
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
import java.util.Map;
public class addServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//消除乱码
request.setCharacterEncoding("UTF-8");
response.setContentType("utf-8");
response.setContentType("text/html;charset=UTF-8");
//使用键值对来对数据进行接受
String num = request.getParameter("num");
String name = request.getParameter("name");
//加入一个判断条件，如果键值对的方式没有接收到数据则使用json进行接收
if(num==null){
//json形式的数据接收需要用到流
InputStream in = request.getInputStream();
//将流转换为字符串 使用的是org.apache.commons.io.IOUtils包下的内容
String str = IOUtils.toString(in,"utf-8");
//将字符串转换成json格式对象 使用的是com.alibaba.fastjson.JSONObject包下的方法
JSONObject jsonObject = JSON.parseObject(str);
//将json对象中的内容提取出来
num = jsonObject.getString("num");
name = jsonObject.getString("name");
}
//从域中取得一个集合
Map list =(Map) request.getServletContext().getAttribute("list");
//如果这个集合不存在，就新建一个集合
if (list==null){
list = new HashMap();
//把集合放到域中
request.getServletContext().setAttribute("list",list);
}
//新建一个JSON对象进行值的存入
JSONObject json = new JSONObject();
//对取到的值进行判断
if(list.containsKey(num)){
//如果key已经存在 则不让放入
//用jsonobject.put()方法将值放入 json对象
json.put("msg",0); //第一个为key 第二个为value
}else{
//如果key不存在 则将取到的值放入
list.put(num,name);
//用jsonobject.put()方法将值放入 json对象
json.put("msg",1);
}
//然后将 map 集合 也放入到json对象中
json.put("list",list);
//将json对象打包 做为返回值发送到jsp中
//JSON.toJSONString()这个方法是为了将json对象转换为字符串 第一个字段为需要传输的对象 第二个是为了转义"/"
response.getWriter().print(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doPost(request,response);
}
}