`
jayyanzhang2010
  • 浏览: 377920 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Json实例:ajax返回多个值

阅读更多
当用ajax返回多个值的时候,可以用xml,也可以用json



json实例
<html>
<head>
<title>AjaxTest</title>
<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.user);
            alert(json.sex);
        }
    }
}
</script>
</head>
<body>
    <div>
        <input type="button" value="AjaxTest" onclick="startRequest();" />
    </div>
</body>
</html>


json.txt

{
"user":"cck",
"sex":"name"
}

====================================================

简单介绍下Json

====================================================

JSON 基础

简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 很容易解释它,而且 JSON 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。

简单 JSON 示例

按照最简单的形式,可以用下面这样的 JSON 表示名称/值对:

{ "firstName": "Brett" }



这个示例非常基本,而且实际上比等效的纯文本名称/值对占用更多的空间:

firstName=Brett



但是,当将多个名称/值对串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个名称/值对的记录,比如:

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }



从语法方面来看,这与名称/值对相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号使这些值有了某种联系。

值的数组

当需要表示一组值时,JSON 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在 XML 中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式。

如果使用 JSON,就只需将多个带花括号的记录分组在一起:

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}



这不难理解。在这个示例中,只有一个名为 people 的变量,值是包含三个条目的数组,每个条目是一个人的记录,其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然,可以使用相同的语法表示多个值(每个值包含多个记录):

{ "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" }
]
}



这里最值得注意的是,能够表示多个值,每个值进而包含多个值。但是还应该注意,在不同的主条目(programmers、authors 和 musicians)之间,记录中实际的名称/值对可以不一样。JSON 是完全动态的,允许在 JSON 结构的中间改变表示数据的方式。

在处理 JSON 格式的数据时,没有需要遵守的预定义的约束。所以,在同样的数据结构中,可以改变表示数据的方式,甚至可以以不同方式表示同一事物。

在 JavaScript 中使用 JSON

掌握了 JSON 格式之后,在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

将 JSON 数据赋值给变量

例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:

var people =
  { "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" }
   ]
  }



这非常简单;现在 people 包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进 JavaScript 变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:

people.programmers[0].lastName;



注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录([0]);最后,访问 lastName 键的值。结果是字符串值 “McLaughlin”。

下面是使用同一变量的几个示例。

people.authors[1].genre   // Value is "fantasy"

people.musicians[3].lastName  // Undefined. This refers to the fourth entry,
and there isn't one

people.programmers.[2].firstName // Value is "Elliotte"



利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API。

修改 JSON 数据

正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:

people.musicians[1].lastName = "Rachmaninov";



在将字符串转换为 JavaScript 对象之后,就可以像这样修改变量中的数据。

转换回字符串

当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:

String newJSONtext = people.toJSONString();



这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令:

String myObjectInJSON = myObject.toJSONString();



这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API(提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。
分享到:
评论

相关推荐

    ajax+json实例

    在这个例子中,服务器端通过`JsonResult`返回JSON格式的用户信息,客户端通过AJAX请求获取这些信息并解析显示。 **五、总结** AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率,减少了不必要的...

    jquery ajax用json传值实例asp.net

    总之,这个"jquery ajax用json传值实例 asp.net"是一个很好的学习资源,可以帮助初学者快速掌握如何在客户端和服务器之间使用AJAX和JSON进行数据交换。通过实践和理解这些基础概念,你可以进一步提升你的Web开发技能...

    Javaweb项目ajax请求Json实例

    综上所述,"Javaweb项目ajax请求Json实例"涵盖了服务器端数据的JSON封装、AJAX请求的发送、JSON数据在JSP页面上的解析与展示等多个关键知识点。在实际开发中,理解并掌握这些概念和技术对于构建交互性强、响应快速的...

    ajax获取嵌套JSON,树形控件显示

    这个“ajax获取嵌套JSON,树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据,并将其适配到ZTree的格式,以便在页面上以树形结构展示。 首先,我们需要理解JSON(JavaScript Object Notation)是一种轻...

    Struts 2.1-AJAX-JSON实例

    4. **Action类**:实现业务逻辑,可能会有一个或多个方法标记为`@Action`,并返回JSON结果类型,如`@Result(type="json")`。 5. **JSP页面**:前端展示界面,通常会使用JavaScript或jQuery等库发送AJAX请求,接收到...

    Ajax下拉框实例,Ajax小实例

    这个"Ajax下拉框实例"是Ajax技术在实际应用中的一个常见示例,主要用于提升用户界面的交互性和响应速度。 在网页中,下拉框(Dropdown List)常用于提供多项选择,而结合Ajax,下拉框可以实现动态加载数据,提高...

    json struts2 ajax实例代码

    Action类需要继承自Struts2提供的ActionSupport类,并且需要定义一个或多个返回值,表示不同的业务处理结果。 2. **配置Struts2 Action**:在Struts2的配置文件struts.xml中,我们需要为Action类添加相应的配置,...

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    Ajax级联操作通常涉及多个下拉列表,当用户在第一个列表中选择一项时,通过Ajax请求获取与之相关的第二级列表数据,更新第二个列表。在这个案例中,"cityJson"可能是城市数据的JSON文件,包含各个城市的ID和名称。当...

    jquery_ajax_json简单实例

    本实例将深入探讨如何利用jQuery的AJAX功能与JSON数据格式进行交互,以实现异步数据加载和更新,从而提高网页的用户体验。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和...

    JSON实例与讲解

    下面是一些基本的JSON实例: ```json { "name": "张三", "age": 30, "isStudent": false, "hobbies": ["读书", "编程"], "address": { "city": "北京", "province": "北京市" } } ``` 在这个例子中,我们...

    AJAX实例应用,有20多个实例

    本压缩包包含了20多个AJAX的应用实例,涵盖了AJAX的基础用法到高级技巧,帮助开发者深入理解和应用AJAX。 1. **基础概念:** - **异步通信**:AJAX的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器...

    struts1+JSON实例

    在这个"struts1+JSON实例"中,我们将深入探讨如何结合Struts1、JSON以及Ajax技术来实现一个功能丰富的学生选课系统。 首先,我们需要理解数据库设计的基础知识。在MySQL中,学生选课系统可能包括如下的表:`...

    AJAX实例应用,有20多个实例(rar)

    本压缩包包含的20多个实例,正是为了帮助学习者深入理解和掌握AJAX的应用。 1. 异步数据获取:AJAX的核心功能之一是异步获取服务器数据,避免页面刷新。实例中可能会展示如何使用XMLHttpRequest对象或者现代浏览器...

    Ajax_Json_jQuery详细Demo

    - **链式操作**:jQuery方法返回的是jQuery对象,所以可以连续调用多个方法,如`$("#element").css("color", "red").addClass("highlight")`。 - **事件处理**:jQuery提供了如click(), hover(), bind()等事件处理...

    json 使用实例

    - 数组(Array):以方括号 `[]` 包围,包含零个或多个值,值之间用逗号 `,` 分隔。 2. **JSON与JavaScript对象转换**: - 在JavaScript中,JSON字符串可以通过 `JSON.parse()` 转换为JavaScript对象。 - ...

    检来的json+servler+ajax 实例

    这个实例对于初学者来说是一个很好的实践项目,可以帮助理解如何在实际项目中运用JSON、Servlet和Ajax进行前后端数据交互。通过这个实例,你可以学习到如何处理HTTP请求,如何构建和解析JSON数据,以及如何在...

    语言程序设计资料:AJAX实例入门.docx

    - **易于集成 Web Service**:AJAX 请求通常返回 XML 或 JSON 格式的数据,这与 Web Service 的数据格式相契合,便于集成现有的 Web Service。 ### 2. AJAX 实例入门 示例中的项目介绍了一个简单的 AJAX 应用案例...

    jquery json分页实例

    这个实例展示了如何结合jQuery的Ajax功能和JSON数据格式来实现无刷新分页,提高了用户界面的响应性和互动性。在实际项目中,还可以考虑添加缓存机制、错误处理、分页效果等增强功能,以进一步提升用户体验。

    ajax 源码100大实例

    每个实例都是一次学习和实践的机会,通过阅读源码,我们可以更好地理解Ajax的工作机制,掌握其实现技巧,为自己的项目注入更多活力。 总之,"ajax源码100大实例"提供了一个全面了解和精通Ajax技术的平台,结合PHP...

    30多个ajax简单实例dome

    在这个"30多个Ajax简单实例dome"压缩包中,你将找到一系列用于学习Ajax的基础到进阶的示例。 1. **异步通信基础**: Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行通信。通过创建...

Global site tag (gtag.js) - Google Analytics