`

用Ajax读取JSON格式的数据

阅读更多

用Ajax读取JSON格式的数据,也需要先用XMLHttpRequest对象的responseText属性读取,然后再用Function构造返回JSON对象的方法,能过方法创建JSON对象。代码如
下:
1、Client – helloworld.htm

<!--</p> <p>Code highlighting produced by Actipro CodeHighlighter (freeware)</p> <p>http://www.CodeHighlighter.com/</p> <p>--><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax JSON’s value”
onclick
=”startRequest();” />
</div>
</body>
</html>
2、Server – data.txt

function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(“GET”, “data.txt”, true);
xmlHttp.send(null);
}catch(exception){
alert(“您要访问的资源不存在!”);
}
}

function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得返回字符串
var resp = xmlHttp.responseText;
// 构造返回JSON对象的方法
var func = new Function(“return “+resp);
// 得到JSON对象
var json = func( );
// 显示返回结果
alert(“JSON’s value: ” + json.info + “(” + json.version + “v)”);
}
}
}

<!--</p> <p>Code highlighting produced by<br /> Actipro CodeHighlighter<br /> (freeware)</p> <p>http://www.CodeHighlighter.com/</p> <p>-->{
info: “hello world!”,
version: “2.0″
}

分享到:
评论

相关推荐

    jQuery ajax读取json文件内容

    ### 标题解析:“jQuery ajax读取json文件内容” 此标题直截了当,明确指出将通过jQuery的Ajax技术来获取并解析JSON文件中的数据。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,...

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据,以及这样做带来的优势。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    总结来说,从给定文件的内容来看,介绍了 JSON 数据格式的特性,jQuery 中处理 Ajax 请求的基本方式,以及如何通过 jQuery 的 `$.ajax()` 和 `$.getJSON()` 方法获取和处理 JSON 数据。同时,还通过实际的代码示例,...

    ajax+json实现三级联动,显示的数据取自后台

    用ajax与后台交互,把数据拼接成json格式返回到前端,再用插件实现三级联动效果

    jQuery中使用Ajax获取JSON格式数据示例代码

    有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现。 下面就使用jQuery读取music.txt文件中的JSON数据格式信息。 首先,music.txt中的内容如下: 代码如下: [ {“optionKey”:...

    jQuery+ajax按条件读取json文件内容

    在这个示例中,我们看到一个使用jQuery和Ajax实现的功能,该功能根据特定条件从JSON文件中读取数据并将其显示在网页上。这个功能可能用于一个在线测试或学习平台,它能根据时间(TestTime)和题号(Number)来加载...

    读取json数据动态生成table

    在实际应用中,你可能需要考虑更多的细节,如错误处理、数据格式验证、表格样式设置等。此外,如果你的项目使用了前端框架(如React、Vue或Angular),你还可以利用框架提供的数据绑定和组件化功能,使得这个过程...

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

    总结来说,通过AJAX读取JSON数据可以极大地提升Web应用的交互性和用户体验。掌握如何使用AJAX技术读取JSON数据,对于任何希望提升其前端开发能力的开发者来说都是一个重要的技能。同时,随着Web技术的发展,开发者...

    文件上传和ajax获取json的小示例

    使用AJAX获取JSON数据的步骤如下: 1. 前端通过JavaScript(如使用jQuery的`$.ajax`或`fetch` API)发送HTTP请求,请求类型通常为GET或POST。 2. 请求携带必要的参数,如查询条件,通过URL查询字符串或请求体传递给...

    ajax与php利用json传输数据,实现局部刷新

    5. **响应的处理**:Ajax请求成功后,会触发`onreadystatechange`事件,当状态变为4(表示请求已完成)且状态码为200(表示成功)时,可以读取`responseText`或`responseJSON`获取返回的JSON数据。 6. **DOM操作**...

    HTML读取json文件示例程序.zip

    这个“HTML读取json文件示例程序.zip”包含了如何在HTML中读取和解析JSON文件的实例。 首先,让我们了解HTML的基本结构。HTML文档由一系列标签组成,这些标签定义了页面的各个部分,如`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`...

    extjs读取解析后端json格式数据显示条形图

    在本案例中,我们将深入探讨如何使用ExtJS读取并解析后端返回的JSON格式数据,然后将这些数据呈现为动态的条形图,以实现吸引用户注意力的视觉效果。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    Java 实现Redis存储复杂json格式数据并返回给前端

    为了提升用户体验,可以考虑使用异步请求(如Ajax)来获取数据,避免阻塞页面加载。 8. **性能优化**:在大量使用Redis时,考虑使用连接池(如JedisPool)来管理Redis连接,以减少连接创建和释放的开销。此外,根据...

    省市区三级联动ajax+json+jquery

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在这个例子中,服务器端返回的省市区数据被组织成JSON格式,方便前端JavaScript进行解析。例如,JSON...

    ECharts多个图表图ajax动态获取json数据——最便捷的调用方式.rar

    ECharts通过ajax动态获取json数据实现各种选择条件的多图表,引入的json文件内的结构具体根据需要随时改动,可以支持任意多的图表实现!关键是理解这种实现思维,其余的实现各种图表就根据这种思想随意发挥即可,...

    ThinkPHP中使用ajax接收json数据的方法

    本篇文章将详细讲解如何在ThinkPHP中使用AJAX接收JSON数据。 首先,我们需要理解JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于机器解析和生成。在前后端通信中,...

    Layui调用json获取表格动态数据代码.zip

    2. 数据源:这里提到的"调用json获取数据"是指使用Ajax从服务器获取JSON格式的数据。在Layui中,这通常是通过`layui.$.ajax`或者使用layui内置的`layui.util.ajax`实现。JSON数据通常包含表格所需的行数据,每个对象...

Global site tag (gtag.js) - Google Analytics