如何利用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 设计模式 安全沙箱模式
Sep 24 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
使用JS读秒使用示例
Sep 21 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
vue 实现购物车总价计算
Nov 06 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
详解JavaScript的this指向和绑定
Sep 08 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php的常量和变量实例详解
2017/06/27 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
使用python生成目录树
2018/03/29 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
员工拓展培训方案
2014/02/15 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
农村文化建设标语
2014/10/07 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL