如何利用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 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
浅谈Node Inspector 代理实现
Oct 19 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 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
php比较两个绝对时间的大小
2014/01/31 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
详解Angular 自定义结构指令
2017/06/21 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue实现树形菜单效果
2018/03/19 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python封装对象实现时间效果
2020/04/23 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
运动会开幕式解说词
2014/02/05 职场文书
食品安全工作实施方案
2014/03/26 职场文书
演讲稿格式
2014/04/30 职场文书
媒体宣传策划方案
2014/05/25 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
redis数据结构之压缩列表
2022/03/21 Redis