如何利用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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
js之ajax文件上传
May 13 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
浅谈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
新52大事件
2020/03/03 欧美动漫
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
js 页面输出值
2008/11/30 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python面向对象编程基础实例分析
2020/01/17 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python元组拆包实现方法
2021/02/28 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
个人简历自荐信
2013/12/05 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
员工工作自我评价
2014/09/26 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
2016新年晚会开场白
2015/12/03 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript