json
- 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知识一种格式要求 {“属性”:“值”}
- 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>
- 把对象转换成JSON
//先导入了gson包后才能使用
//把对象转换成json字符串
Gson gson=new Gson();
String json=gson.toJson(student);
System.out.println(json);
- 把JSON转成对象
Gson gson1=new Gson();
//将student对象转为字符串
String json1=gson.toJson(student);
//将字符串重新转为student对象
Student student2=gson.fromJson(json, Student.class);
System.out.println(student1);
- 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]]
- 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());
- 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);
}
}
- getJSON()方法
- 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>
- 表单序列化
<%@ 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>