js读取json文件片段中的数据实例

在html中利用js读取动态网站从服务器端返回的数据进行显示

1、js.html 页面

需要引入 执行jquery的js文件

<HTML>
<HEAD>
<META name=Generator content=EditPlus>
<META name=Author content="">
<META name=Keywords content="">
<META name=Description content="">
<script src="jquery-1.8.2.min.js"></script>
<script>
$(function(){
//$("#loaddata").click(function(){
$(document).ready(function(){
//使用getJSON方法读取json数据,
//注意：info.json可以是不同类型文件，只要其中的数据为json类型即可
$.getJSON('info.json',function(data){
var html = '';
$.each(data,function(i,item){
html += '<TR><TD>'+item['name']+'</TD>'+
'<TD>'+item['sex']+'</TD>'+
'<TD>'+item.address+'</TD>'+
'<TD>'+item['home']+'</TD></TR>';
});
$('#title').after(html);
//after方法:在每个匹配的元素之后插入内容。
});
});
});
//注:可以是item.address,也可以是item['address']
//firefox报 json文件中 “语法错误 [”,单能加载数据 //ie chrome 无法加载数据
</script>
<INPUT id=loaddata value=加载数据 type=button>
<TABLE id=infotable><TBODY><TR id=title><TH>姓名</TH><TH>性别</TH><TH>地址</TH><TH>主页</TH></TR></TBODY></TABLE>

info.json文件

[
{
"name":"jb51",
"sex":"man",
"address":"hangzhou",
"home":"http://www.jb51.net"
},
{
"name":"lisi",
"sex":"wumen",
"address":"beijing",
"home":"http://yulu.jb51.net"
}
]

网上下载

jquery-1.8.2.min.js

应用场景 ：

定期从数据库中读取的特定记录放到静态页面上去展示，为了减少对数据库访问的压力，把特定记录数取出来存放在json中，页面访问链接不用实时请求数据库。

至此可以将json中的内容加载到html静态也中去。

-------------QA

显示不了中文的确是编码问题，默认保存的json肯定是个记事本，然后改后缀名为json的，记事本默认编码是ANSI的 显示中文自然有问题，

解决方法：打开.json文件 文件 - 另存为 看到下面编码格式了吧 选择UTF-8 就可以了。

这里还有个容易出错的地方：

请求json文件报405错误，明明路径对的 但是还是报错。

解决方法：修改请求方式为get请求。

以上这篇js读取json文件片段中的数据实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用MSScriptControl 在 C# 中读取json数据的方法

    C#中已经有JavaScriptSerializer类可以将json数据给反序列化为对象 /// <summary> /// JSON文本转对象,泛型方法 /// </summary> /// <typeparam name="T">类型</typeparam> /// <param name="jsonText">JSON文本</param> /// <returns>指定类型的对

  • javascript 循环读取JSON数据的代码

    javascript 循环读取JSON数据的代码

    服务端后台返回到客户端的JSON格式字符串: var str = '[{"uname":"王强","day":"2010/06/17"},{"uname":"王海云","day":"2010/06/11"}]'; 我们把它转换成JSON对象:var jsonList=eval("("+str+")");这时候

  • js读取并解析JSON类型数据的方法

    本文实例讲述了js读取并解析JSON类型数据的方法.分享给大家供大家参考,具体如下: 一.什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同时,JSON是 JavaScript 原生格式. 非常适合于服务器与 JavaScript 的交互 二.为什么使用JSON而不是XML 他们都是这样说的:尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Ser

  • litjson读取数据示例

    1.下载并应用LitJson,DLL文件 2.建两个类: 复制代码 代码如下: public class JsonData    {        public string result { get; set; }        public List<GameData> info { get; set; }    } public GameData()        { }        #region Model        private int _id;        privat

  • PHP读取mssql json数据中文乱码的解决办法

    PHP及网页使用UTF-8编码,数据库是sql server2008,使用默认编码(936,即GBK编码) 当读取数据库数据时,使用php自带的json_encode()返回到前端,结果中文不显示. 解决办法如下: 这样,sql server 2008中的中文就可以在网页正常显示了. 如果要将中文正常插入到sql server 2008中,还要加入一条代码:$query = iconv("utf-8", "gbk//ignore", $query);//为了解决中文

  • 如何使用ajax读取Json中的数据

    如何使用ajax读取Json中的数据

    本文给大家分享一下,如何使用ajax读取Json中的数据. 一.基础知识 什么是json? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言 * JSON 具有自我描述性,更易理解 JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编程语言. JSON - 转换为 JavaScript 对

  • python读取json文件并将数据插入到mongodb的方法

    本文实例讲述了python读取json文件并将数据插入到mongodb的方法.分享给大家供大家参考.具体实现方法如下: #coding=utf-8 import sunburnt import urllib from pymongo import Connection from bson.objectid import ObjectId import logging from datetime import datetime import json from time import mktime

  • asp实现读取数据库输出json代码

    复制代码 代码如下: Function GetTable(Table,Where,Order,OrderSort,curpage, pagesize,MiniJson) 'Author : nigou '使用方法 : Response.Write GetTable(Table表名,Where条件,Order主键(必须),OrderSort(asc,desc),curpage当前页, pagesize每页条数,MiniJson是否输出为miniUI格式) '     dim i, j ,rs   

  • Android通过json向MySQL中读写数据的方法详解【读取篇】

    本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先 要定义几个解析json的方法parseJsonMulti,代码如下: private void parseJsonMulti(String strResult) { try { Log.v("strResult11","strResult11="+strResult); int index=strResult.indexOf("[");

  • Android App中读取XML与JSON格式数据的基本方法示例

    XML 假如有这样一个XML格式的数据: <?xml version="1.0" encoding="utf-8"?> <resources> <customer name="luopeng" age="21" gender="1" emial="dylankeepmoving@163.com"/> <customer name="dy

  • Android中Json数据读取与创建的方法

    Android中Json数据读取与创建的方法

    首先介绍下JSON的定义,JSON是JavaScript Object Notation的缩写. 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON的结构: (1) Name/Value Pairs(无序的):类似所熟知的Keyed list. Hash table.Disctiona

  • JSON 数据格式详解

    基础结构 JSON建构于两种结构: 1. "名称/值"对的集合(A collection of name/value pairs).不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array). 2. 值的有序列表(An ordered list of values).在大部分语言中,它被理解为数组(array

随机推荐