如何利用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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 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 meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python Tkinter简单布局实例教程
2014/09/03 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
社区道德讲堂实施方案
2014/03/21 职场文书
员工安全承诺书
2014/05/22 职场文书
运动会横幅标语
2014/06/17 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年底工作总结
2014/12/15 职场文书
教学副校长工作总结
2015/08/13 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书