如何利用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判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
微信小程序webview 脚手架使用详解
Jul 22 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
详细讲解JS节点知识
2010/01/31 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python实现批量修改文件名代码
2017/09/10 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
护理个人求职信范文
2014/01/08 职场文书
军训口号
2014/06/13 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
婚庆答谢词
2015/01/04 职场文书
初婚未育证明样本
2015/06/18 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers