如何利用javascript接收json信息并進(jìn)行處理
javascript接收處理json信息
ajax獲得接口信息,javascript本身處理json信息;
通過eval()把接收的json字符串變成真實(shí)的對(duì)象信息。
提供的json接口數(shù)據(jù)01.php:
<?php
header("content-type:text/html;charset=utf-8");
//制作一個(gè)json信息
echo '{"city":"北京","temp":"9","WD":"西南風(fēng)"}';
客戶端接收處理json信息,要通過eval()把字符串的json變?yōu)閛bject的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具體變?yōu)閛bject的json對(duì)象
eval("var jn_info="+xhr.responseText);
console.log(jn_info);
console.log(jn_info.city);//北京
console.log(jn_info.WD);//西南風(fēng)
console.log(jn_info.temp);//9
}
}
xhr.open('get','./01.php');
xhr.send(null);
}
//在javascript里邊,把字符串“string”變?yōu)閷?duì)象“object”
//var obj = "{name:'kitty',age:5}";
//eval(字符串參數(shù)) 字符串參數(shù)變?yōu)楸磉_(dá)式運(yùn)行
//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>
執(zhí)行效果:


如何把js的字符串變?yōu)閖s的對(duì)象:
//在javascript里邊,把字符串“string”變?yōu)閷?duì)象“object”
var obj = "{name:'kitty',age:5}";
//eval(字符串參數(shù)) 字符串參數(shù)變?yōu)楸磉_(dá)式運(yùn)行
eval("var cat="+obj); //eval("var cat={name:'kitty',age:5}")
console.log(cat);
到此這篇關(guān)于如何利用javascript接收json信息并進(jìn)行處理的文章就介紹到這了,更多相關(guān)javascript接收處理json信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
教你如何在 Javascript 文件里使用 .Net MVC Razor 語法
文章主要是介紹了通過一個(gè)第三方類庫RazorJS,實(shí)現(xiàn)Javascript 文件里使用 .Net MVC Razor 語法,很巧妙,推薦給大家2014-07-07
小程序異步問題之多個(gè)網(wǎng)絡(luò)請求依次執(zhí)行并依次收集請求結(jié)果
這篇文章主要介紹了小程序異步問題之多個(gè)網(wǎng)絡(luò)請求依次執(zhí)行并依次收集請求結(jié)果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
淺析JavaScript回調(diào)函數(shù)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了JavaScript回調(diào)函數(shù)應(yīng)用,感興趣的朋友可以參考一下2016-05-05
JavaScript實(shí)現(xiàn)簡易QQ聊天界面
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易QQ聊天界面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
Typescript高級(jí)類型Record,Partial,Readonly詳解
這篇文章主要介紹了Typescript高級(jí)類型Record,Partial,Readonly等介紹,keyof將一個(gè)類型的屬性名全部提取出來當(dāng)做聯(lián)合類型,本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼
這篇文章主要介紹了JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建,集合是由一組無序且唯一的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合,對(duì)應(yīng)的是數(shù)學(xué)概念當(dāng)中的有限集合;下文詳細(xì)介紹需要的小伙伴可以參考一下2022-04-04
javascript getElementsByClassName 和js取地址欄參數(shù)
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個(gè)),我們先來實(shí)現(xiàn)一個(gè)通過className找DOM節(jié)點(diǎn)的方法:getElementsByClassName。這是對(duì)瀏覽器自有DOM方法的一個(gè)簡單但實(shí)用的擴(kuò)充。2010-01-01

