如何利用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+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php中in_array函数用法分析
2014/11/15 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Maps Javascript
2007/01/22 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
用python制作个音乐下载器
2021/01/30 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
村干部任职承诺书
2015/01/21 职场文书
交通事故调解协议书
2015/05/20 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Mysql事务索引知识汇总
2022/03/17 MySQL
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js