如何利用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 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 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&amp;&amp;mysql)三
2006/10/09 PHP
PHP动态变静态原理
2006/11/25 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python实现队列的方法
2015/05/26 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python使用sorted排序的方法小结
2017/07/28 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
论文指导教师评语
2014/04/28 职场文书
个人自荐材料
2014/05/23 职场文书
本科毕业生自荐信
2014/06/02 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android