Web教程（11）使用Ajax请求JSON数据

最新推荐文章于 2021-07-03 23:49:22 发布

原创最新推荐文章于 2021-07-03 23:49:22 发布 · 736 阅读

2 ·

CC 4.0 BY-SA版权

Web 专栏收录该内容

11 篇文章

订阅专栏

博客介绍了JSON，它是轻量级数据交换格式，基于ECMAScript子集，层次结构简洁，利于人读写和机器解析，能提升网络传输效率。还讲述了使用Ajax请求JSON数据的方法，包括导入gson-2.2.4.jar、前台页面操作及StuManageServlet.java主要代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、什么是JSON

1. JSON(JavaScript Object Notation, JS 对象简谱)

JSON是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2. JSON例子

{"firstName": "Json"}

二、使用Ajax请求JSON数据

1.导入gson-2.2.4.jar

2. 前台页面

注意：最后一步，追加到的div需要自己创建

function getData(){
		$.ajax({
			url:"StuManageServlet",
			method:"get",
			dataType:"json",     //预期从服务器返回的数据是json类型
			data:{
				flag:"stusByAjax"
			},
			async:false,		//是否异步加载
			success:function(result){
				//result：从服务器端返回的数据
				//$(result) :把返回的数据，变成jquery对象，以便使用jquery的each遍历方法
				//index :遍历的索引
				//element:每次遍历的对象的引用
				//index 和element 都是形参 可以换名字
				
				var html=""
				$(result).each(function(index,element){
					liStr="<li>"+element.id+":"+element.name+"</li>"
					html=html+liStr;
				});
				var ulStr="<ul>"+html+"</ul>"
				//把拼接后的代码，追加到div
				$("#stuDiv").append(ulStr);
			}
		})

3. StuManageServlet.java 主要代码

if("stusByAjax".equals(flag)) {
			Student student=new Student(1, "张三", "123", 17, "一年级", 2);
			Student student2=new Student(2, "张三2", "123", 17, "一年级", 2);
			Student student3=new Student(3, "张三3", "123", 17, "一年级", 2);
			List<Student> students=new ArrayList<>();
			students.add(student);
			students.add(student2);
			students.add(student3);
			//把学生对象转换成JSON字符串
			//使用GSON进行转换
			Gson gson=new Gson();
			String str=gson.toJson(students);
			System.out.println(str);
			PrintWriter pw=response.getWriter();
			pw.write(str);
}