如何利用javascript接收json信息并进行处理


Posted in Javascript onAugust 06, 2020

javascript接收处理json信息

ajax获得接口信息,javascript本身处理json信息;

通过eval()把接收的json字符串变成真实的对象信息。

提供的json接口数据01.php:

<?php
header("content-type:text/html;charset=utf-8");
//制作一个json信息
echo '{"city":"北京","temp":"9","WD":"西南风"}';

客户端接收处理json信息,要通过eval()把字符串的json变为object的json;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript接收处理json</title>
	<script type="text/javascript">
	function getweather(){
		//ajax去请求接收json信息
		//js做后期处理
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				//alert(typeof xhr.responseText);//string
				//把接收的字符串json具体变为object的json对象
				eval("var jn_info="+xhr.responseText);
				console.log(jn_info);
				console.log(jn_info.city);//北京
				console.log(jn_info.WD);//西南风
				console.log(jn_info.temp);//9
			}
		}
		xhr.open('get','./01.php');
		xhr.send(null);
	}
	//在javascript里边,把字符串“string”变为对象“object”
	//var obj = "{name:'kitty',age:5}";
	//eval(字符串参数) 字符串参数变为表达式运行
	//eval("var cat="+obj); //eval("var cat={name:'kitty',age:5}")
	//console.log(cat);
	</script>
</head>
<body>
	<h2>接收json信息</h2>
	<input type="button" value="获得天气" onclick="getweather()">
</body>
</html>

执行效果:

如何利用javascript接收json信息并进行处理

如何利用javascript接收json信息并进行处理

如何把js的字符串变为js的对象:

//在javascript里边,把字符串“string”变为对象“object”
	var obj = "{name:'kitty',age:5}";
	//eval(字符串参数) 字符串参数变为表达式运行
	eval("var cat="+obj); //eval("var cat={name:'kitty',age:5}")
	console.log(cat);

到此这篇关于如何利用javascript接收json信息并进行处理的文章就介绍到这了,更多相关javascript接收处理json信息内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 #Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 #Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 #Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
php解析json数据实例
2014/08/19 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
EsLint入门学习教程
2017/02/17 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
python万年历实现代码 含运行结果
2017/05/20 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python计算日期之间的放假日期
2018/06/05 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
临床护士自荐信
2014/01/31 职场文书
元宵晚会主持词
2014/03/25 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
应届生求职自荐信
2014/07/04 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
企业培训简报范文
2015/07/20 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python