`
单刀刑天
  • 浏览: 40662 次
文章分类
社区版块
存档分类
最新评论

jQuery 中使用 JSON

阅读更多

 

JSON 格式

json 是 Ajax 中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它。

JSON 的格式说明可以在可以这里看到,非常详细,还是中文的。

JSON 格式说明

需要特别注意的是,在 JSON 中的属性名是需要使用引号引起来的。

jQuery 中使用 JSON

jQuery 是现在使用广泛的脚本库,那么,在 jQuery 中如何使用 JSON 呢?

解析 JSON

在 jQuery 中已经提供了对于解析 JSON 的内在支持,

jQuery.parseJSON 函数提供了解析的支持,详细的说明见这里

 

var obj = jQuery.parseJSON('{"name":"John"}');  
alert( obj.name === "John" );  
 

使用对象生成 JSON 格式串

在 jQuery 中并没有提供直接将普通的 JavaScript 对象转换为 JSON 串的方法,可以使用下面的扩展库来完成。

jquery-json 扩展库

这个库用来扩展 jQuery ,对于 JSON 的使用,扩展了两个方法。

toJSON 方法用来将一个普通的 JavaScript 对象序列化为 JSON 串。

 

var thing = {plugin: 'jquery-json', version: 2.3};    
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}' 
 

evalJSON 方法将一个 JSON 串解析为一个普通的 JavaScript 对象。

 

var thing = {plugin: 'jquery-json', version: 2.3};    
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}'   
var name = $.evalJSON( encoded ).plugin; // "jquery-json"   
var version = $.evalJSON(encoded).version; // 2.3 
 

这个扩展的下载地址:http://code.google.com/p/jquery-json/

使用 jQuery 配合 WCF

客户端

jQuery 中的 $.post 可以直接向服务器发出请求,将服务器返回的数据按照 JSON 方式进行解析,不过,需要注意下面几点:

请求的内容类型必须为 json 格式,这可以通过上面的 jQuery-json 扩展库来完成,需要特别注意的在请求的 contentType 也必须使用 text/json 进行说明,默认的 post 使用普通的名值对方式请求,因此 contentType 是: application/x-www-form-urlencoded,可以通过 $.ajaxSetup 来进行设置:

 

// Ajax 设置  
$.ajaxSetup({ contentType: 'text/json' });  
 

 

这样,请求的内容类型就设置为需要的类型。

其次,实际的请求内容必须使用 JSON 方式,这可以通过扩展库的 $.toJSON 来实现,例如:

 

$.toJSON({ x: 2, y: 3 })
 

 

这样,如果服务器端提供了一个服务方法 Sum,定义如下:

 

public int Sum(int x, int y)  
{  
    return x + y;  
}
 

就可以如下调用了。注意,WCF 返回的数据在属性 d 中。
// Ajax 设置  
$.ajaxSetup({ contentType: 'text/json' });  

$("#wcfBtn").click(function () {  
    $.post("Service1.svc/Sum", $.toJSON({ x: 2, y: 3 }), function (data) {  
        alert(data.d);  
    });  
});  
 

服务器端的配置

首先,为服务增加标签:[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

 

// #1  
// 为了在脚本中使用,必须增加这个标签  
[System.ServiceModel.Activation.AspNetCompatibilityRequirements( 
    RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]  

 

 

// #2  
// 在网站的配置文件中也需要进行设定  
public class Service1 : IService1  
{  
    public int Sum(int x, int y)  
    {  
        return x + y;  
    }  
}
 

然后,在网站的配置文件中,如下配置。

 

<system.serviceModel>  
  <!-- 为了支持在浏览器端调用 WCF 服务的特定配置 -->  
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true">  
    <serviceActivations>  

      <!-- relativeAddress 服务的地址  
           service 实现服务的类型,全名,包含命名空间,甚至程序集  
           factory 是 WCF 系统提供,直接使用  
      -->  

      <add relativeAddress="Service1.svc" service="MServer.Service1"  factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"   
           />  
    </serviceActivations>  
  </serviceHostingEnvironment>  

    <behaviors>  
        <serviceBehaviors>  
            <behavior name="">  
                <serviceMetadata httpGetEnabled="true" />  
                <serviceDebug includeExceptionDetailInFaults="false" />  
            </behavior>  
        </serviceBehaviors>  
    </behaviors>  
</system.serviceModel>
 

 

原文地址:http://www.cnblogs.com/haogj/archive/2011/12/01/2271098.html

分享到:
评论

相关推荐

    在jQuery中使用JSON(Struts2)

    下面我们将深入探讨如何在jQuery中使用JSON,以及如何与Struts2框架结合。 首先,理解JSON的基本结构至关重要。JSON是一种基于JavaScript语法的文本格式,用于存储和传输数据。其基本数据类型包括对象(键值对)、...

    jQuery 中使用JSON的实现代码

     jQuery 中使用 JSON jQuery 是现在使用广泛的脚本库,那么,在 jQuery 中如何使用 JSON 呢? 解析 JSON 在 jQuery 中已经提供了对于解析 JSON 的内在支持, jQuery.parseJSON 函数提供了解析的支持,详细的说明见...

    使用JQuery实现从JSON对象转换为form提交数据

    在前端开发中,有时我们需要将JSON格式的数据转换成表单(form)的格式进行提交,以便于服务器端处理。在JavaScript的世界里,jQuery库提供了一种便捷的方式来进行这样的转换。本篇文章将深入探讨如何利用jQuery从...

    Jquery.json.js

    在实际项目中,通过使用jQuery提供的这些方法,开发者可以轻松地处理JSON数据,实现与服务器的高效通信。同时,理解jQuery与JSON的交互方式对于Web开发人员来说至关重要,能够提升开发效率和代码质量。

    JQuery中Json的使用示例

    在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM操作、事件处理和Ajax交互等任务。...在提供的压缩包文件"JQuery_Json"中,可能包含了演示如何在jQuery中使用JSON的代码示例,可以参考学习以加深理解。

    Jquery xml2Json

    在Web应用程序中,尤其是在使用jQuery框架的时候,这样的转换工具非常实用,因为JavaScript和jQuery天生更擅长处理JSON结构的数据,而不是XML。 这个插件的工作原理通常是遍历XML文档的节点,然后将这些节点转化为...

    jquery-json使用

    本文将深入探讨jQuery中的JSON使用,结合具体的示例代码JSONObjectDemo,帮助读者理解并掌握这一技能。 首先,JSON是一种基于JavaScript语法的数据格式,它可以表示复杂的数据结构,包括对象和数组。在jQuery中,...

    用jquery解析JSON数据的方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里...

    jquery_json.rar_JSON_jquery_jquery-json_jquery.json_jquery.json.

    总结来说,`jquery_json.rar`中的插件为jQuery提供了JSON处理能力,使得在JavaScript环境中处理JSON数据变得更加便捷,特别是在那些不支持原生JSON API的旧版浏览器中。这个插件的使用,极大地促进了Web应用的开发...

    jQuery对后台json的解析

    在jQuery中,我们可以使用`$.ajax()`或`$.get()`、`$.post()`等方法与服务器进行异步通信。当从后台获取JSON数据时,我们需要设置`dataType`参数为`'json'`,以告知jQuery期望的响应类型。例如: ```javascript $....

    jquery跨域获取json

    标题 "jquery跨域获取json" 涉及到的是JavaScript中的一个常见问题,即如何在浏览器环境中使用jQuery库跨越域限制获取JSON数据。这通常涉及到AJAX请求和JSONP(JSON with Padding)技术。 首先,我们需要理解Web...

    jQuery读取json数据

    在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据...

    jquery.json2xml.js和jquery.xml2json.js

    这样可以方便地将JSON数据发送到服务器,或者在需要XML结构的环境中使用。 ```javascript var json = { "person": { "name": "John", "age": 30, "city": "New York" } }; $.json2xml(json); ``` 而`jquery....

    jquery1.7+jquery for json 2.3

    总结来说,jQuery 1.7与jQuery JSON 2.3插件的结合使用,为开发者提供了强大而全面的JSON处理能力,同时通过jQuery 1.7的改进,让JavaScript编程变得更高效、更易于维护。无论是处理DOM操作、事件绑定还是AJAX通信,...

    jquery.json-viewer, 用于显示JSON数据的jQuery插件.zip

    jquery.json-viewer, 用于显示JSON数据的jQuery插件 jQuery浏览器JSON浏览器是一个jQuery插件,它可以通过将JSON对象转化为HTML来轻松显示JSON对象。功能:语法高亮显示在单击时折叠和展开子节点可以点击链接易于...

    利用jquery如何从json中读取数据追加到html中

    主要给大家介绍了关于利用jquery如何从json中读取数据追加到html中的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编一起来看看吧。

    jquery+json小例子

    下面我们将详细探讨如何在jQuery中使用JSON进行数据的传递和处理。 首先,让我们了解JSON的基本结构。JSON 数据以键值对的形式存在,键用引号括起来,后跟冒号,值与键之间用逗号分隔,整个对象用花括号包围。例如...

    jQuery Ajax前后端使用JSON进行交互示例

    本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    在Web开发中,经常使用JSON格式传输数据。 本文介绍了如何在jQuery中通过AJAX请求从后台获取JSON格式的数据,并将这些数据动态地渲染到HTML中去。具体的知识点可以分为以下几个方面: 1. jQuery的AJAX方法:在文章...

Global site tag (gtag.js) - Google Analytics