直接po图和代码(源代码贴在最后面了)
源代码我没怎么整理,大家凑合看吧!
以下可以正常读取json数据
以下是错误的写法,下面会贴源代码
下面贴源代码
testJson.jsp页面,这是显示数据的前端页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>从mysql数据库中读取出数据并封装成json,显示在jsp页面上(数据库中的数据值中带了双引号和斜杠等这些特殊字符)</title>
<style type="text/css">
div {
background-color: #71C671;
border-radius:5px;
border:4px solid green;
}
.myDiv{
background-color: #e3dfbf;
border-collapse:collapse;
text-align: center;
width: 100%;
border-collapse:separate;
border-radius:8px;
border:3px solid #800080;
}
input[type=button], input[type=submit], input[type=reset], button {
background-color: #8E388E;
border-radius: 4px;
border: none;
padding: 6px 8px;
color: #fff;
font-size: 16px;
cursor: pointer;
margin: 0px;
line-height: normal;
box-sizing: border-box;
display: inline-block;
text-align: center;
vertical-align: middle;
/*width:360px;*/
/*height: 50px;*/
}
input[type=text], input[type=password] {
width: 600px;
height: 32px;
font-size: 20px;
border: 2px solid #8E388E;
border-radius: 4px; /*设置边框的4个直角变成圆角有弧度*/
font-weight: bold; /*文本框中的文本字体加粗*/
color: #0000a0;
background-color: #ffff9f;
}
</style>
<script type="text/javascript">
var testJson = {"userName":"t\om"};
//经过测试,会打印出tom
console.log(testJson.userName);
//从request中取出json数据
var myJsonStr = ${requestScope.jsonStr};
console.log('myJsonStr=' + myJsonStr);
console.log(myJsonStr);
var jsonObj = eval(["新\"[笑傲江湖]\"","新{射雕英雄传}","天龙\"八\":部","明朝\\那些事","[三国演义]","康\\熙王\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]);
console.log(jsonObj);
console.log(jsonObj[0], jsonObj[1]);
var jsonObj66 = eval((["新\"[笑傲江湖]\"","新{射雕英雄传}","天龙\"八\":部","明朝\\那些事","[三国演义]","康\\熙王\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]));
console.log(jsonObj66);
console.log(jsonObj66[2], jsonObj66[3]);
//报错
// var jsonObject = JSON.parse(["新\"[笑傲江湖]\"","新{射雕英雄传}","天龙\"八\":部","明朝\\那些事","[三国演义]","康\\熙王\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]);
//报错
// var jsonObject = JSON.parse('["新\"[笑傲江湖]\"","新{射雕英雄传}","天龙\"八\":部","明朝\\那些事","[三国演义]","康\\熙王\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]');
var jsonObject = JSON.parse('["新\\"[笑傲江湖]\\"","新{射雕英雄传}","天龙\\"八\\":部","明朝\\\\那些事","[三国演义]","康\\\\熙王\\\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]');
console.log(jsonObject);
console.log(jsonObject[0],jsonObject[1], jsonObject[2], jsonObject[3]);
//报错
// var jsonObj1 = eval('["新\"[笑傲江湖]\"","新{射雕英雄传}","天龙\"八\":部","明朝\\那些事","[三国演义]","康\\熙王\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]');
//报错
// var jsonObj1 = eval('(["新\"[笑傲江湖]\"","新{射雕英雄传}","天龙\"八\":部","明朝\\那些事","[三国演义]","康\\熙王\\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"])');
//在两边加上'单引号(即此时myJsonStr2变量是一个json格式的字符串)
var myJsonStr2 = '${requestScope.jsonStr}';
console.log('myJsonStr2=' + myJsonStr2);
console.log(myJsonStr2);
//报错
// var jsonObj2 = eval('["新"[笑傲江湖]"","新{射雕英雄传}","天龙"八":部","明朝\那些事","[三国演义]","康\熙王\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"]');
//报错
// var jsonObj3 = eval('(["新"[笑傲江湖]"","新{射雕英雄传}","天龙"八":部","明朝\那些事","[三国演义]","康\熙王\朝","倚天屠龙记","萍踪侠影","雪山飞狐","???","水浒传"])');
//报错
// var jsonObj4 = eval("(" + myJsonStr2 + ")");
window.onload = function() {
// alert(myJsonStr.length);
showDataToDiv("div1");
showDataToDiv("div2");
}
//把数据展示到div标签中
function showDataToDiv(tagId){
var div1Node = document.getElementById(tagId);
for (var index = 0; index < myJsonStr.length; index++) {
var inputNode = document.createElement("input");
var brNode = document.createElement("br");
var br2Node = document.createElement("br");
inputNode.type = "text";
inputNode.size = 50;
inputNode.value = myJsonStr[index];
div1Node.appendChild(inputNode);
div1Node.appendChild(brNode);
div1Node.appendChild(br2Node);
}
}
//给文本框赋值
function setInputNodeValue(){
var inputNode = document.getElementById("input1");
inputNode.size = 60;
//节点.value这种写法,效果是,直接给节点赋值(不会给节点添加value属性)
inputNode.value = "江西省赣州市于都县";
}
//给文本框赋值
function setInput2NodeValue(){
var input2Node = document.getElementById("input2");
input2Node.setAttribute("size", "60");
//节点.setAttribute("value", "")这种写法,效果是,不但给节点赋值,还会给节点添加value属性
input2Node.setAttribute("value", "我的家乡在江西省赣州市于都县");
}
</script>
</head>
<body>
<h2>从mysql数据库中读取出数据并封装成json,显示在jsp页面上(数据库中的数据值中带了双引号和斜杠等这些特殊字符)</h2>
<div id="div1"></div>
<div id="div2" class="myDiv"></div>
<input type="button" onclick="setInputNodeValue()" value="点击我,给文本框赋值">
<input type="text" id="input1">
<br>
<input type="button" onclick="setInput2NodeValue()" value="点击我,给文本框赋值">
<input type="text" id="input2">
</body>
</html>
下面是servlet(servlet名是TestJson)
package com.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.test.json.DBData;
import net.sf.json.JSONArray;
/**
* 从mysql数据库中读取出数据并封装成json
*/
@WebServlet("/TestJson")
public class TestJson extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
DBData dbData = new DBData();
List<String> data = dbData.getDBData();
JSONArray jsonArray = JSONArray.fromObject(data);
System.out.println("============从mysql数据库中读取出数据,封装成json============");
System.out.println(jsonArray.isEmpty());
String jsonStr = jsonArray.toString();
System.out.println(jsonStr);
request.setAttribute("jsonStr", jsonStr);
//转发到testJson.jsp页面
request.getRequestDispatcher("testJson.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
下面是DBData类
package com.test.json;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
//从mysql数据库中读取出数据并封装成json
public class DBData {
public List<String> getDBData() {
List<String> list = new ArrayList<String>();
String connStr = "jdbc:mysql://localhost:3306/myemployees";
// String sql = "select last_name, salary, email from employees";
String sql = "select * from book";
try {
Class.forName("com.mysql.jdbc.Driver");
Connection connection = DriverManager.getConnection(connStr, "root", "root");
System.out.println("数据库连接=" + connection);
PreparedStatement prepareStatement = connection.prepareStatement(sql);
ResultSet rs = prepareStatement.executeQuery();
int col = rs.getMetaData().getColumnCount();
System.out.println("============================");
while (rs.next()) {
String str = rs.getString("bname");
list.add(str);
System.out.println(str);
}
System.out.println("============================");
rs.close();
prepareStatement.close();
connection.close();
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
// System.out.println("list = " + list);
// System.out.println("============从mysql数据库中读取出数据,封装成json============");
// JSONArray jsonArray = JSONArray.fromObject(list);
// System.out.println(jsonArray.isEmpty());
// System.out.println(jsonArray.toString());
return list;
}
}