JSON的介绍以及简单的使用

最新推荐文章于 2022-01-12 08:47:08 发布

StudiousTiger

最新推荐文章于 2022-01-12 08:47:08 发布

阅读量160

点赞数

分类专栏： Tiger の JavaWeb 文章标签： ajax json js servlet html

本文链接：https://blog.csdn.net/m0_45067620/article/details/109563216

版权

Tiger の JavaScript-基础同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

Tiger の JavaWeb

42 篇文章 0 订阅

订阅专栏

Tiger の JavaScript-提高

19 篇文章 0 订阅

订阅专栏

什么是JSON?
说白了，json就是一种js提供的一种数据交换格式

基本语法：

{ } ：表示对象
对象中都有属性名和属性值
其中属性名必须要是用 “” (双引号包含起来)
属性值：
数字：整型、浮点型
字符串：用英文的双引号引起来
boolean：true、false
数组：使用[ ] 来括起来
对象：通过{ } 括起来
null：空

json的使用：

一般使用eval()函数对JSON字符串进行翻译（对于eval不了解的、尤其是不了解eval解析json的小伙伴们，
可以看看我之前转载的一片对eval的入门简介）
json和ajax（不清楚ajax的小伙伴请看看我之前写的关于ajax的文章）相结合，实现对对象数据向浏览器的传输

咱们直接上代码：点击按钮时，前端接收后面传过来的json字符串（异步响应）
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>Insert title here</title>
<script>
//获取XMLHttpRequest对象的函数
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				alert("哥们你这个浏览太牛了");
				throw e;
			}
		}
	}
}
window.onload=function(){
	var btn = document.getElementById("btn");
	btn.onclick = function(){ //设置响应事件
		var xmlHttp = createXMLHttpRequest(); //获取XMLHttpRequest对象
		xmlHttp.open("get","/jsonIntro/Json1Servlet",true); //建立与servlet的连接
		xmlHttp.send(null); //发送请求
		xmlHttp.onreadystatechange = function(){  //给xmlHttp设置状态监听器
			if(xmlHttp.status == 200 && xmlHttp.readyState ==4){ //双重判断（响应状态位4 且 响应码为200）
				var text = xmlHttp.responseText; //获取服务器端的响应文本
				var Person = eval("("+text+")"); //同eval函数解析JSON字符串,解析为对象
				var t = document.getElementById("t");
				//通过eval解析的Jason对象，回去其中的属性值，并设置给span标签
				t.innerHTML = Person.name+","+Person.age+","+Person.gender;
			}
		}
	}
		
}
</script>
</head>
<body>
<spon>JSON小案例</spon><br>
<button id="btn">点击这里</button><br>
<spon id ="t"></spon>
</body>
</html>

servlet：

package sdpei.hxh_jason;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Json1Servlet")
public class Json1Servlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String json = "{\"name\":\"胡某人\",\"age\":18,\"gender\":\"男\"}";
		response.getWriter().print(json);
	}

}

前端执行事件前页面：
在这里插入图片描述
点击按钮后的页面：

StudiousTiger

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSON的介绍以及简单的使用

什么是JSON?说白了，json就是一种js提供的一种数据交换格式基本语法：{ } ：表示对象对象中都有属性名和属性值其中属性名必须要是用 “” (双引号包含起来)属性值：数字：整型、浮点型字符串：用英文的双引号引起来boolean：true、false数组：使用[ ] 来括起来对象：通过{ } 括起来null：空json的使用：一般使用eval()函数对JSON字符串进行翻译（对于eval不了解的、尤其是不了解eval解析json的小伙伴们，可以看看我之前转载的一片对
复制链接

扫一扫

专栏目录