如何利用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 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
Javascript学习指南
Dec 01 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
javascript iframe跨域详解
Oct 26 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
github配置使用指南
2014/11/18 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python映射拆分操作符用法实例
2015/05/19 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
浅谈Python中的私有变量
2018/02/28 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
安全生产先进个人材料
2014/02/06 职场文书
化妆品店促销方案
2014/02/24 职场文书
软环境建设心得体会
2014/09/09 职场文书
办公室主任岗位职责
2015/01/31 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers