如何利用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将string类型转换int类型
Dec 09 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JS Attribute属性操作详解
May 19 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
世界上最短的数字判断js代码
Sep 09 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的String类代码
2010/04/20 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
基于php-fpm的配置详解
2013/06/03 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php如何获取文件的扩展名
2015/10/28 PHP
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python File(文件) 方法整理
2019/02/18 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python requests获取网页常用方法解析
2020/02/20 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
大学生未来职业生涯规划书
2014/02/15 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
护士工作失误检讨书
2014/09/14 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
转变工作作风心得体会
2016/01/23 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书