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

2024-12-02 23:00:51

本文给大家分享一下，如何使用ajax读取Json中的数据。

一、基础知识

什么是json？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
JSON - 转换为 JavaScript 对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

二、读取Json中的数据

首先我编写了一个Json的文件，里面有内容。注意格式。

图一编写json的文件

然后，编写html代码，并引用ajax。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用AJAX异步读取json</title>
<script src="ajax.js">
</script>
<script>
  window.onload=function()
  {
    /*获得按钮*/
    var aBtn=document.getElementById('btn1');
    //给按钮添加点击事件
    aBtn.onclick=function()
    {
      //调用ajax函数
      ajax('data.json',function(str){
        //将JSON 数据来生成原生的 JavaScript 对象
        var arr=eval(str);
        alert(arr[0].b);
    });
    };
  };
</script>
</head>
<body>
读取json里面的数据 <br />
<input id="btn1" type="button" value="读取json里面的数据" />
</body>
</html>

封装的AJAX函数代码如下：

/*
AJAX封装函数
url：系统要读取文件的地址
fnSucc：一个函数，文件取过来，加载完会调用
*/
function ajax(url, fnSucc, fnFaild)
{
  //1.创建Ajax对象
  var oAjax=null;

  if(window.XMLHttpRequest)
  {
    oAjax=new XMLHttpRequest();
  }
  else
  {
    oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2.连接服务器
  oAjax.open('GET', url, true);

  //3.发送请求
  oAjax.send();

  //4.接收服务器的返回
  oAjax.onreadystatechange=function ()
  {
    if(oAjax.readyState==4) //完成
    {
      if(oAjax.status==200)  //成功
      {
        fnSucc(oAjax.responseText);
      }
      else
      {
        if(fnFaild)
          fnFaild(oAjax.status);
      }
    }
  };
}

接下来就是要读取出文件内容，在这之前，有一点要提的是，AJAX是从服务器上读取文件，所以要把写好的JSON文件放到服务器的路径下，可能初学者接触过的服务器只有IIS，他的文件路径是C:\inetpub\wwwroot\aspnet_client\system_web，只要把Json放到这个路径下，然后用localhost来访问服务器，就可以了。

图二读取效果图

以上就是本文的全部内容，希望对大家的学习有所帮助。

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
js读取并解析JSON类型数据的方法

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

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

服务端后台返回到客户端的JSON格式字符串: var str = '[{"uname":"王强","day":"2010/06/17"},{"uname":"王海云","day":"2010/06/11"}]'; 我们把它转换成JSON对象:var jsonList=eval("("+str+")");这时候
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
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
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
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
使用MSScriptControl 在 C# 中读取json数据的方法

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

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

相关推荐

随机推荐