17、json

json
  1. json
  • 简介

javaScript Object Notation :js对象表示法

例:stu name=“张三” age=18

var stu=(name:“张三”,age:18);//js表示一个对象,js声明对象的属性双引号加不加是可选的

json就是表示对象的方法,格式就是按照js声明对象的格式来

json格式有要求:

key(属性)必须有双引号

value:基本类型和引用类型(对象)

用JSON来表示一个stu对象:要声明一个json对象(json称为js对象的字面量—》object->toString)

var stu={“name”:“张三”,“age”:18};

JSON知识一种格式要求 {“属性”:“值”}

  1. json在js中的应用
<script type="text/javascript">
	//目前是对象
	var json={"name":"张三","age":18};
	//如何转为字符串,转为字符串
	//js中如何将json对象转为字符串,利于发送和传输
	var str=JSON.stringify(json);
	alert(str);
	
	//将json格式的字符串转为对象,利于解析
	var obj=JSON.parse(str);
	alert(obj.name);
	
	//json在js中的应用
	//如果网络间传输的都是这种json格式的字符串的话
</script>
  1. 把对象转换成JSON
//先导入了gson包后才能使用		
//把对象转换成json字符串
		Gson gson=new Gson();
		String json=gson.toJson(student);
		System.out.println(json);
  1. 把JSON转成对象
        Gson gson1=new Gson();
		//将student对象转为字符串
		String json1=gson.toJson(student);
		//将字符串重新转为student对象
		Student student2=gson.fromJson(json, Student.class);
		System.out.println(student1);
  1. json字符串与List的互转
		//json字符串与List的互转
		List<Student> list=new ArrayList<>();
		Student student1 = new Student("张三",20);
		Student student2 = new Student("李四",20);
		list.add(student1);
		list.add(student2);
		//将list转为json
		Gson gson=new Gson();
		String json=gson.toJson(list);
		System.out.println("list转为json:"+json);
		
		//gson TypeToken接口
		 List<Student> fromJson = gson.fromJson(json, new MyType().getType());
		System.out.println("json字符串转为List:"+fromJson);

MyType.java

/*
 * 继承TypeToken类即可,在类的泛型上写好自己的类型
 */
public class MyType extends TypeToken<List<Student>>{
	
}
/*
 * 继承TypeToken类即可,在类的泛型上写好自己的类型
 */
public class MyType extends TypeToken<List<Student>>{
	
}

结果

list转为json:[{"name":"张三","age":20},{"name":"李四","age":20}]
json字符串转为List:[Student [name=张三, age=20], Student [name=李四, age=20]]

  1. Json和Map之间的互转
		//json与map之间的互转
		Map<String,Student> map=new HashMap<>();
		Student student1 = new Student("张三",20);
		Student student2 = new Student("李四",20);
		map.put("no1", student1);
		map.put("no2", student2);
		Gson gson=new Gson();
		//将map转为json字符串
		String json=gson.toJson(map);
		System.out.println(json);
		Map<String,Student> fromJson=gson.fromJson(json, new TypeToken<Map<String,Student>>(){}.getType());
		System.out.println(fromJson);
		System.out.println(fromJson.get("no1").getName());
  1. jQery的get和Post方法(post方法与get方法同理)

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 type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//如何发送get请求
		//url请求地址,[data]请求参数
		//[callback]请求成功的回调函数,[type]设置返回的响应内容类型
		//xml,html,script,json,text,_default
		$("#btn01").click(function(){
			$.get("jQueryGetServlet?method=getUrlParam&id="+Math.random(),function(data){
				//data响应数据
				alert(typeof data);
				alert(data);
				//将json转换成对象
				var obj=JSON.parse(data);
				var str="学生名"+obj.name;
				str+="<br/>学生年龄"+obj.age;
				$("#divShow").html(str);
			},"text");
		});
		$("#btn02").click(function(){
			$.get("jQueryGetServlet?method=getUrlParam&id="+Math.random(),function(data){
				//data响应数据,选择json类型
				//声明为json直接转换为json对象
				var obj=data;
				var str="学生名"+obj.name;
				str+="<br/>学生年龄"+obj.age;
				$("#divShow").html(str);
			},"json");
		});
		$("#btn03").click(function(){
			//发送请求携带数据{name:"李四",age:18}
			$.get("jQueryGetServlet?method=getUrlData&id="+Math.random(),{name:"李四",age:18},function(data){
				//data响应数据,选择json类型
				//声明为json直接转换为json对象
				var obj=data;
				var str="学生名"+obj.name;
				str+="<br/>学生年龄"+obj.age;
				$("#divShow").html(str);
			},"json");
		});
	});
</script>
</head>
<body>
<button id="btn01">Button1</button>
<button id="btn02">Button2</button>
<button id="btn03">Button3</button>
<div style="border:1px solid;width:300px;height:200px" id="divShow">
<!-- 显示学生详细信息 -->
</div>
</body>
</html>

java

package com.aiguigu.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * Servlet implementation class jQueryGetServlet
 */
public class jQueryGetServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;

	protected void getUrlParam(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		Student student=new Student("张三",25);
		Gson gson=new Gson();
		//将student转化为json
		String json=gson.toJson(student);
		response.getWriter().write(json);
	}
	protected void getUrlData(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//从请求的数据中获取学生名和学生年龄
		String stuName=request.getParameter("name");
		String stuAge=request.getParameter("age");
		System.out.println("获取到的学生名:"+stuName);
		System.out.println("获取到的学生年龄:"+stuAge);
		int parseInt=Integer.parseInt(stuAge);
		Student student=new Student(stuName,parseInt);
		Gson gson=new Gson();
		//将student转化为json
		String json=gson.toJson(student);
		response.getWriter().write(json);
	}

}
  1. getJSON()方法

在这里插入图片描述

  1. ajax请求

$.ajax():jquery中底层的ajax请求方法,可以设置详细的参数

方法签名:

$.ajax(url,[settings])

[]表示可选参数

参数解析:

url:发送请求地址

settings:其他详细设置,可设置项参加jquery文档

<script type="text/javascript">
	$(function(){
		$("#btn01").click(function(){
			$.ajax({
				//指定请求地址
				url:"jQueryGetServlet?method=getUrlData&id="+Math.random(),
				//请求数据
				//也可以用"name=张三&age=18"
				data:{"name":"张三","age":18},
				//请求方法
				type:"POST",
				async:true,
				//请求成功执行
				success:function(data){
					alert(data);
				},
				//请求失败执行
				error:function(){
					alert("发生错误了。。。。");
				}
			});
		});
	});
</script>
  1. 表单序列化
<%@ 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 type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn01").click(function(){
			//var name=$("#inputname").val();
			//var age=$("#inputage").val();
			//将表单数据序列化
			var datas=$("#formsubmit").serialize();
			$.ajax({
				//指定请求地址
				url:"jQueryGetServlet?method=getUrlData&id="+Math.random(),
				//请求数据
				//也可以用"name=张三&age=18"
				data:datas,
				//请求方法
				type:"POST",
				async:true,
				//请求成功执行
				success:function(data){
					alert(data);
				},
				//请求失败执行
				error:function(){
					alert("发生错误了。。。。");
				}
			});
		});
	});
</script>
</head>
<body>

<div style="border:1px solid;width:300px;height:200px" id="divShow">
<!-- 显示学生详细信息 -->
</div>
<form id="formsubmit" action="">
姓名:<input type="text" name="name"/><br/>年龄:<input type="text" name="age"/>
</form>
<button id="btn01">Button3</button>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值