JSON与AJAX基础

最新推荐文章于 2024-08-21 14:09:37 发布

沐艺^^

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量78

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/awei66/article/details/117438287

版权

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>

沐艺^^

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSON与AJAX基础

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.
复制链接

扫一扫