如何利用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中的float运算精度实例分析
Aug 21 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
微信小程序 video组件详解
Oct 25 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
vue component组件使用方法详解
Jul 14 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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
各种战术和打法的原创者
2020/03/04 星际争霸
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php服务器的系统详解
2019/10/12 PHP
img的onload的另类用法
2008/01/10 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python帮你识破双11的套路
2019/11/11 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python脚本后台执行方式
2019/12/21 Python
Tensorflow 实现释放内存
2020/02/03 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
结婚喜宴主持词
2014/03/14 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
教师见习报告范文
2014/11/03 职场文书
售票员岗位职责
2015/02/15 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS