广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >ajax中如何读取Json数据
  • 919
分享到

ajax中如何读取Json数据

2024-04-02 19:04:59 919人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关ajax中如何读取JSON数据,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、基础知识什么是json?jsON 指的是 jav

这篇文章将为大家详细讲解有关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的文件,里面有内容。注意格式。

ajax中如何读取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函数代码如下:


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来访问服务器,就可以了。

ajax中如何读取Json数据

关于ajax中如何读取Json数据就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: ajax中如何读取Json数据

本文链接: https://www.lsjlt.com/news/77741.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ajax中如何读取Json数据
    这篇文章将为大家详细讲解有关ajax中如何读取Json数据,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、基础知识什么是json?JSON 指的是 Jav...
    99+
    2022-10-19
  • Ajax如何读取数据
    这篇文章给大家分享的是有关Ajax如何读取数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 拿出来我们上次准备好的东...
    99+
    2022-10-19
  • 如何从json文件中读取数据
    你可以使用Python的`json`模块来读取JSON文件。下面是一个简单的示例代码:```pythonimport json# 打...
    99+
    2023-09-13
    json
  • Ajax中怎么读取数据
    这篇文章给大家介绍Ajax中怎么读取数据,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1:XMLHTTPRequest对象的函数. 2:Asp输出xml格式的文件.你可以点击查看该文件...
    99+
    2022-10-19
  • ajax如何获取json数据并显示
    使用Ajax可以通过发送HTTP请求获取JSON数据,然后将数据显示在网页上。以下是一个使用Ajax获取JSON数据并显示的示例:`...
    99+
    2023-09-13
    ajax json
  • Html5中如何使用localStorage存储JSON数据并读取JSON数据
    这篇文章将为大家详细讲解有关Html5中如何使用localStorage存储JSON数据并读取JSON数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。localStor...
    99+
    2022-10-19
  • jmeter如何读取json重复数据
    要在JMeter中读取重复的JSON数据,您可以使用以下步骤:1. 添加一个HTTP请求,用于获取返回的JSON数据。2. 添加一个...
    99+
    2023-09-15
    jmeter json
  • 安卓中json数据的读取
    安卓中json数据的读取 1.采用org.json读取的方式 1.1创建assets文件夹 1.创建assests文件夹 直接下一步   1.2创建过程 创建j...
    99+
    2023-09-30
    json
  • Python中JSON数据怎么读取
    本文小编为大家详细介绍“Python中JSON数据怎么读取”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python中JSON数据怎么读取”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。读取方法必须导入JSON模...
    99+
    2023-06-30
  • ajax跨域如何获取网站json数据
    这篇文章主要介绍了ajax跨域如何获取网站json数据,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。由于自己的公司的项目需要调用视频地址当为链接时:直接在播放器用数据库查找的...
    99+
    2023-06-08
  • Python中JSON数据的读取方法
    小编给大家分享一下Python中JSON数据的读取方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!Python主要用来做什么Python主要应用于:1、Web开发;2、数据科学研究;3、网络爬虫;4、嵌入式应用开发;5、...
    99+
    2023-06-14
  • mybatis-plus读取JSON类型并处理JSON中数据
    mybatis-plus读取JSON类型 本文总共三个步骤: 1、在数据库表定义JSON字段; 2、在实体类加上@TableName(value = “extra_info”, autoResultM...
    99+
    2023-09-04
    json spring boot mybatis mysql
  • python如何读取json文件指定数据
    在Python中,可以使用`json`模块来读取和处理JSON文件。下面是一个示例代码,展示了如何读取JSON文件中的指定数据:``...
    99+
    2023-09-04
    python json
  • Vue2.5如何通过json文件读取数据
    这篇文章主要介绍了Vue2.5如何通过json文件读取数据,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.准备工作1.1 webpack....
    99+
    2022-10-19
  • Ajax如何读取数据并分页显示
    这篇文章将为大家详细讲解有关Ajax如何读取数据并分页显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 我觉得还是有必要把我的ajax分页...
    99+
    2022-10-19
  • Java中JSON数据的读取和解析
            在做springboot项目时用到了json文件读取和解析,所以在这里记录一下学习过程中总结的一些点,希望对大家有帮助~ 配置fastJson    com.alibaba    fastjson    1.2.35 ...
    99+
    2023-09-11
    java json 开发语言
  • python读取json数据存入MySQL
    要将JSON数据存入MySQL中,您需要完成以下步骤:1. 导入所需的库:```pythonimport jsonimport my...
    99+
    2023-09-01
    python
  • Ajax中怎么读取数据到表格
    Ajax中怎么读取数据到表格,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。代码如下:<% '出自:http://Www.Web6...
    99+
    2022-10-19
  • ajax怎么获取json数据并显示
    要使用Ajax获取JSON数据并显示,可以按照以下步骤进行操作:1. 创建一个XMLHttpRequest对象:```var xhr...
    99+
    2023-09-12
    json ajax
  • java读取json数据中文乱码解决
    java读取json数据出现乱码的代码:(推荐:java视频教程)//从json文件中读取数据 StringBuffer stringBuffer = new StringBuffer(); try { BufferedRea...
    99+
    2021-06-27
    java 乱码
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作