Json
--1,概述
是一种轻量级的技术,用来解决 浏览器和服务器之间的数据传输
格式简单,体量小
--2,语法
"k":"v"
{"k":"v","k":"v","k":"v"}
[{"k":"v","k":"v","k":"v"} ,{"k":"v","k":"v","k":"v"} ]
--3,练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json语法</title>
<!-- HTML嵌套js代码 -->
<script>
//json用来在浏览器和服务器之间做数据的传输,因为语法简洁,轻量级的
function d1(){
//定义json字符串:语法--- "k" : "v"
var jsonstr = ' "name" : "张三" ' ; //简单的json串
jsonstr = ' { "name" : "张三" , "age" : "20" } ' ; //json对象
jsonstr = [ //json数组
{ "name" : "张三" , "age" : "20" },
{ "name" : "李四" , "age" : "10" },
{ "name" : "王五" , "age" : "30" }
] ;
//给div处显示json字符串的数据
var ele = document.getElementById("d1");
// ele.innerHTML=jsonstr ;
//把数组里[1]的对象,里的age属性值10获取到,,,,再赋值
ele.innerHTML=jsonstr[1].age ;
}
</script>
</head>
<body>
<div id="d1" onclick="d1();">点我</div>
</body>
</html>
--4,转换工具
使用js的内置对象JSON,进行 两种 json数据的转换
把json字符串 转成 js对象 -- JSON.parse("json字符串")
把js对象 转成 json字符串 -- JSON.stringify(js对象)
--5,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON对象的使用</title>
<script src="js/jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
function d1(){
//定义json字符串
var text = ' { "name":"熊大" , "age":"20" } ' ;
//1,,,把串转成js对象 -- 使用js的内置对象JSON
var jsobj = JSON.parse(text);
//console输出
console.log(text);//json字符串
console.log(jsobj);//js对象 -- 方便的 获取对象身上的属性值.函数
console.log(text.name);//undefined
console.log(jsobj.age); //"熊大"
//2,,,把js对象 转成json串 -- 使用js的内置对象JSON
var jsonstr = JSON.stringify(jsobj);
console.log(jsonstr);//json字符串
console.log(jsonstr.length);//获取 json字符串的长度
}
</script>
</head>
<body>
<div id="d1" onclick="d1();">我是div1</div>
</body>
</html>
Ajax
--1,概述
ajax的Asynchronous Javascript And XML
好处:异步访问(加快响应速度,不必等待)
局部刷新(不必刷新整个网页,只是局部刷新)
--2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 ajax</title>
<!-- 引用jQuery文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<!-- ajax的好处: 异步访问(加快响应速度,不必等待),局部刷新(不必刷新整个网页,只是局部刷新) -->
<script>
$(function(){//文档就绪事件
/* 使用jQuery提供的Ajax技术,需要指定一些参数 */
$.ajax({//发起ajax的请求--准备参数
//访问https://p.3.cn/prices/mgets?skuIds=J_100003717483
type: "POST" , //请求方式
url: "https://p.3.cn/prices/mgets" , //请求地址
contentType: "application/json;charset=utf-8", //请求的数据的类型
data: //请求时带的参数
{
"skuIds": "J_100003717483"
},
dataType: "jsonp" , //期望服务器返回来的数据的类型
//返回数据:[{"p":"-1.00","op":"2499.00","cbf":"0","id":"J_100003717483","m":"10000.00"}]
success: function(data){ //请求成功,会返回数据封装在data里
// document.getElementById("d1").innerHTML=data[0].id; //js
$("#d1").text(data[0].id); //jquery
document.getElementById("d2").innerHTML=data[0].op;
document.getElementById("d3").innerHTML=data[0].p;
},
error: function(data){ //请求失败,给失败提示
alert(" 请求错误! ");
}
})
} );
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<img src="images/1.jpg" />
<img src="images/a.png" />
</body>
</html>
JSON与AJAX基础
最新推荐文章于 2024-08-21 14:09:37 发布