标签：Web name age JSON sex Ajax var alert
目录
1.JSON的简介
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。
2.使用自定义对象封装数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//姓名：张三 年龄：23 性别：男 吃饭 睡觉的功能
// class Student
//ES5 没有类 这个概念，有对象的概念 ES6 有类的概念了
//通过构造函数，来创建对象 然后封装数据
//我们把它当成构造函数来用
function Student(name,age,sex){
//给对象的属性设置值，this,代表我new的那个对象
this.name=name;
this.age=age;
this.sex=sex;
//提供功能
this.eat=function(){
alert("吃饭");
}
this.sleep=function(){
alert("睡觉")
}
}
var student=new Student("张三",23,"男");
var name=student.name;
var age=student.age;
var sex=student.sex;
alert(name);
alert(age);
alert(sex);
student.eat();
student.sleep();
//创建第二个对象
var student2=new Student("李四",24,"女");
//使用 Object来封装数据
var obj=new Object();
obj.name="王五";
obj.age=23;
obj.show=function(){
alert("呵呵");
}
</script>
</head>
<body>
</body>
</html>
3.JSON对象封装数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON：
/*
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
*/
//姓名：张三 年龄：23 性别：男 吃饭 睡觉的功能
//定义JSON对象：格式 {"键":值,"键":值}
//键是字符串类型，只是任意类型
var student = {
"name": "张三",
"age": 23,
"sex": "男",
"eat": function() {
alert("吃饭")
},
"sleep": function() {
alert("睡觉")
}
}
//通过键找值
var name = student.name;
var age = student.age;
alert(name);
alert(age);
student.eat();
student.sleep();
//键找值，还有一种写法
var value = student['sex'];
alert(value);
//删除键值
delete student.name;
delete student.age;
delete student.sleep;
//写法2
delete student["newObj"];
console.log(student);
//增加属性
student.color = "白色";
//修改属性
student.color = "黑色";
//也可以如下修改属性的值
student['color']="红色";
console.log(student);
</script>
</head>
<body>
</body>
</html>
4.JSON的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var person={
"name":"老王",
"age":23,
"car":{
"carName":"宝马",
"carPrice":200000
},
"children":["老大","老二","老三"],
"falg":false
}
//获取车的名字
var carName=person.car.carName;
alert(carName);
var value=person.children[2];
alert(value);
</script>
</head>
<body>
</body>
</html>
5.解析JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var jsonData = {
"data": {
"yesterday": {
"date": "13日星期四",
"high": "高温 7℃",
"fx": "东北风",
"low": "低温 -3℃",
"fl": "<![CDATA[2级]]>",
"type": "阴"
},
"city": "西安",
"forecast": [{
"date": "14日星期五",
"high": "高温 7℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 -1℃",
"fengxiang": "西风",
"type": "晴"
},
{
"date": "15日星期六",
"high": "高温 10℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 0℃",
"fengxiang": "西南风",
"type": "阴"
},
{
"date": "16日星期天",
"high": "高温 8℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 -1℃",
"fengxiang": "东北风",
"type": "多云"
},
{
"date": "17日星期一",
"high": "高温 11℃",
"fengli": "<![CDATA[2级]]>",
"low": "低温 0℃",
"fengxiang": "东北风",
"type": "霾"
},
{
"date": "18日星期二",
"high": "高温 12℃",
"fengli": "<![CDATA[1级]]>",
"low": "低温 1℃",
"fengxiang": "东北风",
"type": "霾"
}
],
"ganmao": "感冒多发期，适当减少外出频率，适量补充水分，适当增减衣物。",
"wendu": "0"
},
"status": 1000,
"desc": "OK"
}
var value=jsonData.data.forecast[0].date;
alert(value);
</script>
</head>
<body>
</body>
</html>
6.JSON数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//数组元素是JSON对象
var jsonArr = [{
"name": "张三",
"age": 23,
"sex": "男"
},
{
"name": "李四",
"age": 24,
"sex": "男"
},
{
"name": "王五",
"age": 25,
"sex": "男"
}
]
var name = jsonArr[2].name;
alert(name);
</script>
</head>
<body>
</body>
</html>
7.JSON对象的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var person={
"name": "张三",
"age": 23,
"sex": "男"
}
//json对象的遍历 for in
for(key in person){
var value=person[key];
alert(key+"="+value);
}
//for in 可以遍历普通的数组
var arr=[10,20,30,40,50,60];
for(index in arr){
var ele=arr[index];
alert(ele);
}
</script>
</head>
<body>
</body>
</html>
8.JSON对象和JSON字符串的互转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON对象 他是JS的对象
var jsonObj = {
"name": "张三",
"age": 23,
"sex": "男"
};
var name=jsonObj.name;
//JSON字符串,符合json格式的字符串
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';
//var name=jsonStr.name //错误的
//其他语言 例如Java 语言，他只能把JSON对象 当成字符串来看待，只是个字符串的格式符合JSON格式
//前台和后台进行数据传输，采用JSON格式，只是后台返回给前台的数据以JSON字符串返回的。
//前台，可以把JSON字符串转换成JSON对象，把数据解析出来
var jsonStrData='{"data":{"yesterday":{"date":"13日星期四","high":"高温 7℃","fx":"东北风","low":"低温 -3℃","fl":"<![CDATA[2级]]>","type":"阴"},"city":"西安","forecast":[{"date":"14日星期五","high":"高温 7℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"西风","type":"晴"},{"date":"15日星期六","high":"高温 10℃","fengli":"<![CDATA[1级]]>","low":"低温 0℃","fengxiang":"西南风","type":"阴"},{"date":"16日星期天","high":"高温 8℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"东北风","type":"多云"},{"date":"17日星期一","high":"高温 11℃","fengli":"<![CDATA[2级]]>","low":"低温 0℃","fengxiang":"东北风","type":"霾"},{"date":"18日星期二","high":"高温 12℃","fengli":"<![CDATA[1级]]>","low":"低温 1℃","fengxiang":"东北风","type":"霾"}],"ganmao":"感冒多发期，适当减少外出频率，适量补充水分，适当增减衣物。","wendu":"0"},"status":1000,"desc":"OK"}';
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON对象 他是JS的对象
var jsonObj = {
"name": "张三",
"age": 23,
"sex": "男"
};
var name = jsonObj.name;
//JSON对象转换成JSON字符串
var str = JSON.stringify(jsonObj); //'{"name": "张三","age": 23,"sex": "男"}';
console.log(str)
//JSON字符串,符合json格式的字符串
//JSON格式的字符串，注意：键使用双引号引起来，要用紧凑格式，不能美化，都在一行上。
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';
//JSON字符串，转换成JSON对象
var obj = JSON.parse(jsonStr);
alert(obj.name);
var jsonStrData =
'{"data":{"yesterday":{"date":"13日星期四","high":"高温 7℃","fx":"东北风","low":"低温 -3℃","fl":"<![CDATA[2级]]>","type":"阴"},"city":"西安","forecast":[{"date":"14日星期五","high":"高温 7℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"西风","type":"晴"},{"date":"15日星期六","high":"高温 10℃","fengli":"<![CDATA[1级]]>","low":"低温 0℃","fengxiang":"西南风","type":"阴"},{"date":"16日星期天","high":"高温 8℃","fengli":"<![CDATA[1级]]>","low":"低温 -1℃","fengxiang":"东北风","type":"多云"},{"date":"17日星期一","high":"高温 11℃","fengli":"<![CDATA[2级]]>","low":"低温 0℃","fengxiang":"东北风","type":"霾"},{"date":"18日星期二","high":"高温 12℃","fengli":"<![CDATA[1级]]>","low":"低温 1℃","fengxiang":"东北风","type":"霾"}],"ganmao":"感冒多发期，适当减少外出频率，适量补充水分，适当增减衣物。","wendu":"0"},"status":1000,"desc":"OK"}';
var myObj=JSON.parse(jsonStrData);
var num=myObj.status;
alert(num);
</script>
</head>
<body>
</body>
</html>
9.遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//数组元素是JSON对象
var jsonArr = [{
"name": "张三",
"age": 23,
"sex": "男"
},
{
"name": "李四",
"age": 24,
"sex": "男"
},
{
"name": "王五",
"age": 25,
"sex": "男"
}
]
for (index in jsonArr) {
var jsonObj = jsonArr[index];
for (key in jsonObj) {
var value = jsonObj[key];
alert(key + "=" + value);
}
}
</script>
</head>
<body>
</body>
</html>
10.JSON的介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JSON：封装数据的一种格式，这种格式现在被用作网络传输的首选格式
//JSON对象和JSON字符串的互转
//JSON对象 他是JS的对象
var jsonObj = {
"name": "张三",
"age": 23,
"sex": "男"
};
//把json对象转换成JSON字符串
var jsonStr = JSON.stringify(jsonObj);
//注意JSON字符串的格式：键要用双引号引起来，不要美化，全部在一行的紧凑格式
var jsonStr = '{"name": "张三","age": 23,"sex": "男"}';
var obj=JSON.parse(jsonStr);
var v=obj.age;
alert(v);
</script>
</head>
<body>
</body>
</html>
11.Ajax的简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="cityName"></h1>
<script type="text/javascript">
//AJAX
/* AJAX = Asynchronous JavaScript and XML（ 异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言， 而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术， 在不重新加载整个页面的情况下。
*/
/*
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
*/
//使用步骤1. 创建异步请求对象
// 创建 XMLHttpRequest 对象
// 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
var xmlhttp;
xmlhttp = new XMLHttpRequest();
//2.向服务器发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
// method：请求的类型；GET 或 POST
// url：文件在服务器上的位置
// async：true（异步）或 false（同步）
var url = 'http://wthrcdn.etouch.cn/weather_mini?city=商洛';
xmlhttp.open("GET", url, true);
xmlhttp.send();
//服务器响应如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText属性。
/* onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。 */
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取后台响应的JSON字符串
var jsonStr=xmlhttp.responseText;
console.log(jsonStr);
var jsonObj=JSON.parse(jsonStr);
var cityName=jsonObj.data.city;
document.getElementById("cityName").innerText=cityName;
}
}
</script>
</body>
</html>
标签：Web,name,age,JSON,sex,Ajax,var,alert 来源： https://blog.csdn.net/weixin_43496491/article/details/122515870
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。