javascript中eval函数和JSON.parse函数处理json中的引号和\斜杠转义字符

最新推荐文章于 2024-05-06 16:31:53 发布

程宇寒

最新推荐文章于 2024-05-06 16:31:53 发布

阅读量1.4k

点赞数

文章标签： json 转义字符双引号/单引号/引号 eval函数 JSON.parse函数

本文链接：https://blog.csdn.net/czh500/article/details/101477827

版权

也可以看我这篇文章

直接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;
	}

}

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中eval函数和JSON.parse函数处理json中的引号和\斜杠转义字符

也可以看我这篇文章直接po图和代码(源代码贴在最后面了)源代码我没怎么整理，大家凑合看吧！以下可以正常读取json数据以下是错误的写法，下面会贴源代码下面贴源代码testJson.jsp页面，这是显示数据的前端页面<%@ page language="java" contentType="text/html; charse...
复制链接

扫一扫