首先建立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>
分享到：
相关推荐
SSH 框架 Ajax 获取的 JSON 格式数据处理过程 在本文中，我们将详细讲解如何使用 SSH 框架中的 Ajax 获取的 JSON 格式数据处理过程，并且实现菜单联动下拉框的功能。 一、Ajax 中 response 返回的数据是一个二维...
这个“ajax获取嵌套JSON，树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据，并将其适配到ZTree的格式，以便在页面上以树形结构展示。 首先，我们需要理解JSON（JavaScript Object Notation）是一种轻...
通过这个函数，我们可以方便地读取JSON数据。以下是一个基本的示例： ```javascript $.ajax({ url: 'your_server_url', type: 'GET', // 或者 'POST'，取决于你的需求 dataType: 'json', // 告诉jQuery期望的...
总结来说，本实例的核心是利用AJAX技术从服务器获取复杂的JSON数据，并对其进行解析和处理。理解AJAX的工作原理、JSON的结构以及如何在JavaScript中操作JSON是Web开发者必备的技能。在实际应用中，你可能还需要处理...
这里使用了eval()函数来转换字符串形式的JSON数据为JavaScript对象。然而，在实际开发中，出于安全考虑，不建议使用eval()函数来解析JSON，因为它有可能执行恶意的代码。更安全的方法是使用JSON.parse()方法。 4. ...
客户端可能有一个HTML页面，通过JavaScript调用AJAX发送请求，服务器端使用.NET处理请求，将数据以JSON格式返回。例如，一个简单的获取用户信息的接口： ```javascript // 客户端AJAX请求 function getUserInfo() {...
总结，AJAX解析JSON数据主要涉及`XMLHttpRequest`或`fetch` API的使用，通过设置响应类型和响应处理函数，我们可以方便地获取和操作JSON数据。对于新手来说，理解这些基本概念和操作是学习Web开发的重要一步。在实际...
AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术，它结合了 AJAX（Asynchronous JavaScript and XML）和 JSON（JavaScript Object Notation）的优势，使得网页可以在不刷新整个页面的情况下与服务器进行...
除了$.ajax()，jQuery还提供了$.getJSON()方法，这是一个简化的版本，用于获取JSON数据。例如： ```javascript $.getJSON('your-api-url', function(data) { console.log(data); // 处理返回的JSON数据 }); ``` ...
在AJAX的回调函数中，我们可以通过`responseText`或`response`属性获取到服务器返回的JSON数据字符串。然后，使用`JSON.parse()`方法将这个字符串转换为JavaScript对象，以便在客户端进行操作。 以jQuery为例，一个...
整个流程的核心在于，通过Ajax请求获取JSON数据，然后使用JavaScript处理这些数据，动态更新网页内容，实现了按条件筛选并显示JSON文件中的数据。这样的设计可以实现动态加载和更新，提高用户体验，而无需每次交互都...
通过以上分析，我们不仅理解了如何使用jQuery的Ajax功能读取JSON文件，还深入了解了JSON文件的结构以及如何在JavaScript中解析和展示这些数据。这种方法对于构建动态网站、实现用户界面的实时更新具有重要意义。掌握...
在处理Ajax返回的JSON（JavaScript Object Notation）数据时，可能会遇到一些问题，尤其是当JSON数据中包含换行符时。本文将深入探讨这个问题，以及如何正确地处理这种情况。 首先，JSON是一种轻量级的数据交换格式...
这里我们探讨的是一个基于JSP的文件上传示例，以及如何通过AJAX技术实现实时刷新，从数据库获取并返回JSON数据到前端页面。 首先，文件上传是Web应用中常见的一种用户交互方式，允许用户将本地的文件（例如图片）...
JSONP是一种非标准的跨域方法，通过动态插入`<script>`标签，从服务器端获取JSON数据。服务器需要将数据包装在一个函数调用中，客户端定义该函数来接收数据。而CORS则是一种更为现代和安全的跨域方式，需要服务器端...
例如，`$.ajax()`函数可以创建一个完整的AJAX请求，而`$.getJSON()`则专门用于获取JSON数据。这些方法提供了许多配置选项，如请求类型（GET/POST）、URL、数据、成功和错误回调函数等。 在提供的"Ajax-json.rar...
5. **响应的处理**：Ajax请求成功后，会触发`onreadystatechange`事件，当状态变为4（表示请求已完成）且状态码为200（表示成功）时，可以读取`responseText`或`responseJSON`获取返回的JSON数据。 6. **DOM操作**...
总结一下，读取JSON数据并动态生成HTML表格的关键步骤包括： 1. 使用fetch或XMLHttpRequest获取JSON数据。 2. 解析JSON数据。 3. 创建HTML表格结构，包括表头和数据行。 4. 遍历JSON数据，为每一条数据创建表格行和...
**Ajax技术** Ajax，全称为Asynchronous JavaScript and XML（异步...通过Ajax请求获取JSON数据，并在页面上进行解析和渲染，可以在不刷新整个页面的情况下完成数据的更新，提升用户界面的响应速度和用户体验。
在Ajax的回调函数中，接收到JSON数据后，可以通过JSON.parse()方法将其转换为JavaScript对象，然后进行操作。 ```javascript if (xhr.readyState == 4 && xhr.status == 200) { var jsonData = JSON.parse(xhr....