如何利用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 相关文章推荐
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
浅析vue深复制
Jan 29 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 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
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python与C互相调用的方法详解
2017/07/14 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python爬虫与反爬虫大战
2020/07/30 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
大学班长竞选稿
2015/11/20 职场文书
如何用python反转图片,视频
2021/04/24 Python
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Python实现拼音转换
2021/06/07 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js