如何利用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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
xml 与javascript结合的问题解决方法
Mar 24 Javascript
JQuery小知识
Oct 15 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
微信开发 微信授权详解
Oct 21 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JS实现横向轮播图(初级版)
Jun 24 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
微信小程序开发之转发分享功能
2019/10/22 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python三元运算实现方法
2015/01/12 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
运动会致辞稿50字
2014/02/04 职场文书
安全生产汇报材料
2014/02/17 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
《分一分》教学反思
2014/04/13 职场文书
融资租赁计划书
2014/04/29 职场文书
出国英文推荐信
2014/05/10 职场文书
英文演讲稿
2014/05/15 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书