一、上传单个JSON数据
所需jar文件:
创建JSON实体类：
package domain;public class Data1 {private String name;private String gender;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}}
创建JSON文件：
var jsonData1={"name":"姓名","gender":"性别"}
前台JSP：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/test1.css" /><link rel="stylesheet" href="css/Bootstrap4.3.1.css" /><link rel="stylesheet" href="css/verify.css" /><link rel="stylesheet" href="css/dialog.css" /><link rel="stylesheet" href="css/foundation5.5.3.css" /><script src="js/jQuery3.2.1.js"></script><script src="js/popper1.15.0.min.js"></script><script src="js/Bootstrap4.3.1.js"></script><script src="js/verify.js"></script><script src="js/jquery.dialog.js"></script><script src="json/data1.json"></script><title>Insert title here</title></head><body><div id="remove_line"><div class="display_block"><h3></h3><div id="form_div"><input type="text" placeholder="请输入您的昵称" /> <input type="text" placeholder="请输入您的性别" /><input type="text" placeholder="其他输入" /><button type="button" id="submit" class="button success">上传</button></div></div></div><script>$(document).ready(function() {$("#submit").click(function() {jsonData1.name = $("input[type='text']:eq(0)").val();jsonData1.gender = $("input[type='text']:eq(1)").val();var data = {origin : "test1",data1 : JSON.stringify(jsonData1)};$.ajax({url : "getValue",method : "post",traditional : true,cache : false,async : false,data : data,dataType : "json",beforeSend : function() {},success : function(data) {var json = JSON.stringify(data);var a = eval('(' + json + ')');alert("上传成功，返回码："+a.echo);},error : function(data) {alert("数据库连接失败！");}})})$(document).foundation();})</script></body></html>
后台Control数据接收与处理：
Data1 data1 = null;data1 = new Gson().fromJson((String) request.getParameter("data1"), Data1.class);int status = 0;System.out.println("获取前台数据:" + data1.getName() + " " + data1.getGender());if (data1 != null) {status = 1;}jsonObject.addProperty("echo", status);
二、上传JSON数组
前台JSP：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/test1.css" /><link rel="stylesheet" href="css/Bootstrap4.3.1.css" /><link rel="stylesheet" href="css/verify.css" /><link rel="stylesheet" href="css/dialog.css" /><link rel="stylesheet" href="css/foundation5.5.3.css" /><script src="js/jQuery3.2.1.js"></script><script src="js/popper1.15.0.min.js"></script><script src="js/Bootstrap4.3.1.js"></script><script src="js/verify.js"></script><script src="js/jquery.dialog.js"></script><script src="json/data1.json"></script><title>Insert title here</title></head><body><div id="remove_line"><div class="display_block"><h3></h3><div id="form_div"><input type="text" placeholder="其他输入" /> <input type="text" placeholder="其他输入" /><input type="text" placeholder="其他输入" /><button type="button" id="submit" class="button success">上传</button></div></div></div><script>$(document).ready(function() {$("#submit").click(function() {var arr=[];jsonData1.name = "姓名1";jsonData1.gender = "性别1";var obj=JSON.parse(JSON.stringify(jsonData1));arr.push(obj);jsonData1.name = "姓名2";jsonData1.gender = "性别2";var obj2=JSON.parse(JSON.stringify(jsonData1));arr.push(obj2);var data = {origin : "test1",data1 : JSON.stringify(arr)};$.ajax({url : "getValue",method : "post",traditional : true,cache : false,async : false,data : data,dataType : "json",beforeSend : function() {},success : function(data) {var json = JSON.stringify(data);var a = eval('(' + json + ')');alert("上传成功，返回码："+a.echo);},error : function(data) {alert("数据库连接失败！");}})})$(document).foundation();})</script></body></html>
后台Control接收并处理JSON数组：
int status=0;List<Data1> data1List=new Gson().fromJson((String)request.getParameter("data1"),new TypeToken<List<Data1>>() {}.getType());for(Data1 data1:data1List) {System.out.println("获取前台json数组:" +data1.getName()+" "+data1.getGender());}if(data1List.size()!=0) {status=1;}jsonObject.addProperty("echo", status);
三、回传单个Json和Json数组
后台Control处理回传数据:
int status=0;List<Data1> data1List=new Gson().fromJson((String)request.getParameter("data1"),new TypeToken<List<Data1>>() {}.getType());for(Data1 data1:data1List) {System.out.println("获取前台json数组:" +data1.getName()+" "+data1.getGender());}if(data1List.size()!=0) {status=1;}Data1 data1=new Data1();data1.setName("小明");data1.setGender("男");String json = new Gson().toJson(data1);List<Data1> data1List2=new ArrayList<Data1>();Data1 data2=new Data1();data2.setName("小黄");data2.setGender("女");data1List2.add(data1);data1List2.add(data2);String json2 = new Gson().toJson(data1List2);jsonObject.addProperty("echo", status);jsonObject.addProperty("singleJson", json);jsonObject.addProperty("jsonArr", json2);
前台JSP接收后台传回的单个Json对象和Json数组：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/test1.css" /><link rel="stylesheet" href="css/Bootstrap4.3.1.css" /><link rel="stylesheet" href="css/verify.css" /><link rel="stylesheet" href="css/dialog.css" /><link rel="stylesheet" href="css/foundation5.5.3.css" /><script src="js/jQuery3.2.1.js"></script><script src="js/popper1.15.0.min.js"></script><script src="js/Bootstrap4.3.1.js"></script><script src="js/verify.js"></script><script src="js/jquery.dialog.js"></script><script src="json/data1.json"></script><title>Insert title here</title></head><body><div id="remove_line"><div class="display_block"><h3></h3><div id="form_div"><input type="text" placeholder="其他输入" /> <input type="text" placeholder="其他输入" /><input type="text" placeholder="其他输入" /><button type="button" id="submit" class="button success">上传</button></div></div></div><script>$(document).ready(function() {$("#submit").click(function() {var arr=[];jsonData1.name = "姓名1";jsonData1.gender = "性别1";var obj=JSON.parse(JSON.stringify(jsonData1));arr.push(obj);jsonData1.name = "姓名2";jsonData1.gender = "性别2";var obj2=JSON.parse(JSON.stringify(jsonData1));arr.push(obj2);var data = {origin : "test1",data1 : JSON.stringify(arr)};$.ajax({url : "getValue",method : "post",traditional : true,cache : false,async : false,data : data,dataType : "json",beforeSend : function() {},success : function(data) {var json = JSON.stringify(data);var a = eval('(' + json + ')');alert("上传成功，返回码："+a.echo);jsonData1=JSON.parse(a.singleJson);console.log("回传的单个Json数据："+jsonData1.name+" "+jsonData1.gender);console.log("回传的Json数组：");var arr=a.jsonArr;while(arr.indexOf("{")!=-1){var start=arr.indexOf("{");var end=arr.indexOf("}")+1;jsonData1=JSON.parse(arr.substring(start,end));console.log(jsonData1.name+" "+jsonData1.gender);arr=arr.slice(end,arr.length);}},error : function(data) {alert("数据库连接失败！");}})})$(document).foundation();})</script></body></html>
