ajax读取Json数据的方法-js教程-PHP中文网

首页

web前端

js教程

ajax读取Json数据的方法

php中世界最好的语言

Apr 04, 2018 pm 04:03 PM

ajaxjavascriptjson

这次给大家带来ajax读取Json数据的方法，ajax读取Json数据的注意事项有哪些，下面就是实战案例，一起来看一下。

本文给大家分享一下，如何使用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来访问服务器，就可以了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

实现ajax的3种方法

jQuery+AJAX调用页面的后台

以上是ajax读取Json数据的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。