首先建立json.txt文件
{
"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}
通过异步调用，来读取json数据
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">
var xmlHttp;
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", "Json.txt", true);
xmlHttp.send(null);
}
catch(exception)
{
alert("xmlHttp Fail");
}
}
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200 || xmlHttp.status == 0)
{
var result = xmlHttp.responseText;
var json = eval("(" + result + ")");
alert(json.programmers[0].firstName);//读取json数据
//alert(json.sex);
}
}
}
</script>
</head>
<body>
<div>
<input type="button" value="AjaxTest" onclick="startRequest();" />
</div>
</body>
</html>
分享到：
相关推荐
### 标题解析：“jQuery ajax读取json文件内容” 此标题直截了当，明确指出将通过jQuery的Ajax技术来获取并解析JSON文件中的数据。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，...
关于"jQuery读取json数据"这个主题，我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据，以及这样做带来的优势。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于...
本文实例讲述了jQuery+ajax读取json数据并按照价格排序。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed]...
ECharts通过ajax动态获取json数据实现各种选择条件的多图表，引入的json文件内的结构具体根据需要随时改动，可以支持任意多的图表实现！关键是理解这种实现思维，其余的实现各种图表就根据这种思想随意发挥即可，...
总结一下，读取JSON数据并动态生成HTML表格的关键步骤包括： 1. 使用fetch或XMLHttpRequest获取JSON数据。 2. 解析JSON数据。 3. 创建HTML表格结构，包括表头和数据行。 4. 遍历JSON数据，为每一条数据创建表格行和...
总结来说，通过AJAX读取JSON数据可以极大地提升Web应用的交互性和用户体验。掌握如何使用AJAX技术读取JSON数据，对于任何希望提升其前端开发能力的开发者来说都是一个重要的技能。同时，随着Web技术的发展，开发者...
用ajax与后台交互,把数据拼接成json格式返回到前端,再用插件实现三级联动效果
整个流程的核心在于，通过Ajax请求获取JSON数据，然后使用JavaScript处理这些数据，动态更新网页内容，实现了按条件筛选并显示JSON文件中的数据。这样的设计可以实现动态加载和更新，提高用户体验，而无需每次交互都...
这里我们探讨的是一个基于JSP的文件上传示例，以及如何通过AJAX技术实现实时刷新，从数据库获取并返回JSON数据到前端页面。 首先，文件上传是Web应用中常见的一种用户交互方式，允许用户将本地的文件（例如图片）...
这个“HTML读取json文件示例程序.zip”包含了如何在HTML中读取和解析JSON文件的实例。 首先，让我们了解HTML的基本结构。HTML文档由一系列标签组成，这些标签定义了页面的各个部分，如`<html>`、`<head>`、`<body>`...
在本文中，我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组，特别是在实现菜单...整个流程包括前端的AJAX请求、后端的JSON数据处理以及UI交互逻辑。理解这些技术对于开发复杂的Web应用程序至关重要。
例如，JSON数据可能如下所示： ```json { "province": [ {"id": "1", "name": "北京市"}, {"id": "2", "name": "上海市"} ], "city": { "1": [ {"id": "11", "name": "东城区"}, {"id": "12", "name": ...
本篇文章将详细讲解如何在ThinkPHP中使用AJAX接收JSON数据。 首先，我们需要理解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在前后端通信中，...
返回的数据通常是一段JSON格式或者HTML片段，前端通过JavaScript处理这些返回数据，并动态更新页面上对应的部分。 #### 6. 代码中的URL解析 在代码片段中提到的URL `ajax_page.asp?action=read&pagecount=3¤t...
5. **响应的处理**：Ajax请求成功后，会触发`onreadystatechange`事件，当状态变为4（表示请求已完成）且状态码为200（表示成功）时，可以读取`responseText`或`responseJSON`获取返回的JSON数据。 6. **DOM操作**...
总结来说，jQuery的Ajax功能提供了方便的方式来异步加载和处理JSON数据。在上述示例中，无论是使用`$.ajax()`还是`$.getJSON()`，都可以有效地从本地JSON文件获取数据，并将其展示在网页上。了解和掌握这些技巧对于...
### 浅析Ajax请求JSON数据并用JS解析 #### 一、引言 随着Web技术的发展，前后端分离成为了一种常见的开发模式。在这种模式下，前端负责展示数据，而后端则提供数据服务。Ajax（Asynchronous JavaScript and XML）...
JSON数据格式基础 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON是基于JavaScript的一个子集，它继承了JavaScript中对象和数组的表示方法，但...