JSON
定义:(javascript object notation ) 翻译为JS对象简谱。
js的一个对象表示方式
JSON并不是一种技术,是一种数据格式
格式
{“name”:”value”,”name2”:”value2”}
(注意此处标点符号全为英文格式)
要求:
属性名必须加双引号,属性值如果是字符串也必须加双引号,数字和boolean可以不加
{} 用大括号代表对象,用中括号 [] 表示数组
案例
<script>
//js中对象表示1
var p1=new Object();
p1.name="admin";
p1.age=23;
p1.sex="男";
// alert(p1.age+p1.name);
//alert(p1["name"]);
//js对象2
//、json要求属性名必须加双引号
var p3="{\"name\":\"张三\",\"age\":23,\"sex\":\"女\"}"
//alert(p3)
</script>
转换
var p3="{\"name\":\"张三\",\"age\":23,\"sex\":\"女\"}";
//将字符串转为js对象
var obj=JSON.parse(p3);
//alert(obj.name+"=="+obj["name"])
var obj2={name:"张三",age:39,score:[20,33,45,50,90]};
//js对象转为字符串
//alert(JSON.stringify(obj2));
遍历
var p2={name:"李四",age:28,sex:"女"};
//alert(p2["name"]+p2["age"])
//alert(p2.name)
for(var key in p2){
alert(key+"==="+p2[key]);
}
JSON案例,省市级联
省:<select id="pro"></select>
市:<select id="citySelect"></select>
<script>
var data={"河南":["郑州","新乡","驻马店"],"山东":["济南","泰山","青岛"],"安徽":["合肥","巢湖","马鞍山"]};
var option="";
for(var key in data){
option+="<option value='"+key+"'>"+key+"</option>";
}
pro.innerHTML=option;
pro.onchange=function(){
var city=data[this.value];
// alert(city)
var o="";
for(var i=0;i<city.length;i++){
o+="<option value='"+city[i]+"'>"+city[i]+"</option>";
}
citySelect.innerHTML=o;
}
</script>
Java中处理JSON
三个jar包导入项目工程
Fastjson.jar
Gson.jar
Jackson.jar
三个都可以解析JSON
个人实践证明:jackson最稳定,最方便,所以我在spring里面依赖jackson
Java对象转为json字符串
@Test
public void test1() throws JsonProcessingException {
UserInfo u=new UserInfo("张三","123456");
System.out.println(u);
ObjectMapper om=new ObjectMapper();
//将java对象转为json格式的字符串
String str = om.writeValueAsString(u);
System.out.println(str);
List<UserInfo> list=new ArrayList<UserInfo>();
list.add(new UserInfo("admin1", "1231"));
list.add(new UserInfo("admin2", "1232"));
list.add(new UserInfo("admin3", "1233"));
list.add(new UserInfo("admin4", "1234"));
//将java集合对象转为json格式的字符串
String s2=om.writeValueAsString(list);
System.out.println(s2);
}
将字符串转为对象
@Test
public void test2() throws JsonParseException, JsonMappingException, IOException {
String s1="{\"name\":\"张三\",\"psw\":\"123456\"}";
String s2="[{\"name\":\"admin1\",\"psw\":\"1231\"},{\"name\":\"admin2\",\"psw\":\"1232\"},{\"name\":\"admin3\",\"psw\":\"1233\"},{\"name\":\"admin4\",\"psw\":\"1234\"}]";
ObjectMapper om=new ObjectMapper();
//將json格式的字符串转为对象
UserInfo u = om.readValue(s1, UserInfo.class);
System.out.println(u.getName()+"="+u.getPsw());
//将json格式的字符串转为java集合
List<UserInfo> list=om.readValue(s2, new TypeReference<List<UserInfo>>() {});
for(UserInfo user:list) {
System.out.println(user.getName()+"=="+user.getPsw());
}
}
ajax
Asynchronous Javascript And XML
异步 JavaScript 和 XML
Ajax:
实现不刷新整个网页,来异步刷新局部页面的一个技术
JS原生ajax
1.创建xmlHttpRequest对象,核心
2.open打开请求
3.Send 发送请求
4.通过核心对象接收返回数据
jQuery-ajax 写法
$.ajax({
type:"get",
url:"test",
async:true,//是否异步
dataType:"",
data:{},
success:function(data){//请求成功的回调函数
},
error:function(){//服务器内部出错
}
});
顺序没有要求
type: 请求方式
url: 请求路径
async: 是否异步请求
dataType: 返回数据的格式
– text: 文本
– json: 返回的是json格式数据
– xml:返回xml格式
– Html:
– Jsonp: 跨域请求返回json
data: 请求数据
Success:请求成功的回调函数
Error:服务器出错的回调函数
一个不太规范的案例
前端JSP里面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
$.ajax({
type:"get",
url:"test",//请求路径
async:true,//是否异步
dataType:"json",//后台返回的数据格式
data:{name:"chicken","psw":"123456"},//请求数据
success:function(dd){//请求成功的回调函数
//var obj=JSON.parse(dd); type为text时,返回的是文本
alert(dd.name+"--"+dd.psw)
},
error:function(){//服务器内部出错
alert("服务器内部出错");
}
});
})
})
</script>
</head>
<body>
<div id="con"></div>
<div>
<button id="btn">显示</button>
</div>
</body>
</html>
后台很基础的接收数据方法,实际书写时,只参考处理数据的代码,其他写法可以忽略
@WebServlet("/test")
public class TestServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
String n=req.getParameter("name");
String p=req.getParameter("psw");
System.out.println("name==="+n+"psw==="+p);
//System.out.println(1/0);
resp.setContentType("text/html;charset=utf-8");
// resp.getWriter().print("鸡,你太美");
UserInfo u=new UserInfo("chicken", "你太美");
ObjectMapper om=new ObjectMapper();
String str=om.writeValueAsString(u);
resp.getWriter().print(str);
}
}
jQuery-ajax - 简易写法
$.post(“url”,{},function(data){},”json”);
$(function(){
$("#btn").click(function(){
$.post("test",{name:"鸡"},function(d){
alert(d.name+"--"+d.psw);
},"json");
});
});
ajax同步异步默认为true,如果想设ajax的同步异步
------------------顺序发送请求
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"test",
dataType:"json",
type:"post",
async:false,//同步
success:function(d){
alert(d.name+"--"+d.psw+"1");
}
});
$.ajax({
url:"test",
dataType:"json",
type:"post",
async:false,
success:function(d){
alert(d.name+"--"+d.psw+"2");
}
});
$.ajax({
url:"test",
dataType:"json",
type:"post",
async:false,
success:function(d){
alert(d.name+"--"+d.psw+"3");
}
});
$.ajax({
url:"test",
dataType:"json",
type:"post",
async:false,
success:function(d){
alert(d.name+"--"+d.psw+"4");
}
});
});
})
</script>
Ajax 序列化表单
//使用 .serialize()方法
//让表单提交
$("#btn").click(function(){
//alert($("#fim").serialize());
$.ajax({
url:"regist",
type:"get",
data:$("#fim").serialize(),
success:function(data){
alert(data);
}
});
});