如何利用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 建立对象的方法
Apr 21 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
利用js实现简易红绿灯
Oct 15 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实现维护文件代码
2007/06/14 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
php依赖注入知识点详解
2019/09/23 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python Tkinter的图片刷新实例
2019/06/14 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python super()函数使用及多重继承
2020/05/06 Python
numpy实现RNN原理实现
2021/03/02 Python
财务会计人员岗位职责
2013/11/30 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
升职演讲稿范文
2014/05/23 职场文书
公司承诺书怎么写
2014/05/24 职场文书
无工作证明怎么写
2015/06/15 职场文书
安全教育第一课观后感
2015/06/17 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android