jQuery调用WCF服务传递JSON对象
yingzhicai 2009-06-12
下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问，我们将在客户端使用Ajax技术来 与WCF服务进行通信。这里我们仅使用jQuery去连接Web Service,而不去使用ASP.Net AJAX库，至于为什么不使用AJAX库中，那是因为我们在项目中已经使用了jQuery，而它已经能处理全部的AJAX请求和所有功能，并且，如果我们 一旦使用ASP.NET AJAX库，我们也必须多包含一个超过80Kb的数据量（调试模式下会更大），但这也不是说ASP.NET AJAX库不实用，事实上，如果使用了相同的类库，我们能够少写很多的额外代码，但这个例子就是为了说明，在没有一个好的客户端代理的情况下，我们是如何调用Web服务的。
WCF 服务:
我们先创建一个WebSite，然后添加一个AJAX-enabled WCF Service，从而创建WCF服务。（请确保你使用了正确的.Net Framework 版本，我用的是3.5） 
在我们添加完service后，它会自动进入该service的后置代码文件，Go ahead and browse around the file for a second.
首先我们要做的是找到"AspNetCompatibilityRequirements"并将其值置为 "Allowed":
[AspNetCompatibilityRequirements( RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed )]
这个属性的设置可将我们的服务跑在ASP.NET compatibility模式，如果我们未将该值设为"Allowed"，那么就无法通过ASP.Net去访问到该服务，这个属性是当你添加 "AJAX-enabled WCF Service" 时自动生成的。更多祥细请参看MSDN。
现在再来看自动生成的后置代码文件，我们能发现已经存在了一个被标注了"OperationContract"特性的"DoWork()" 的方法，这个方法是自动生成的，我们将使用这个方法来完成下面的示例。我们再来为该方法添加一个"WebGet"的特性，并设"RequestFormat" 的值为 "Json." 我们再来为该方法加上另外的一个特性RequestFormat，WebGet 和Get动词一样，作用于一个UriTemplate（本文不对此作进一步讨论），RequestFormat 特性可以让我们接收JSON格式的请求。
我们的 "DoWork()" 方法如下:
<ol class="dp-j">
<li class="alt"><span><span>[OperationContract] </span></span></li>
<li class=""><span>[WebGet( RequestFormat=WebMessageFormat.Json )] </span></li>
<li class="alt">
<span></span><span class="keyword">public</span><span> </span><span class="keyword">void</span><span> DoWork() </span>
</li>
<li class=""><span>{ </span></li>
<li class="alt">
<span> </span><span class="comment">// Add your operation implementation here </span><span> </span>
</li>
<li class="">
<span> </span><span class="keyword">return</span><span>; </span>
</li>
<li class="alt"><span>} </span></li>
</ol>对象的模型：
我们希望通过"DoWork()" 来传递一个叫“Person”的对象，那先来创建一个Person对象写入到当前类的头部，其包含字段和属性（Name, Age 和 the types of Shoes they own），这个类同时也作为所传递JSON的结构。
<ol class="dp-j">
<li class="alt"><span><span>[Serializable] </span></span></li>
<li class="">
<span>[DataContract( Namespace = </span><span class="string"><font color="#0000ff">"http://www.dennydotnet.com/"</font></span><span>, Name = </span><span class="string"><font color="#0000ff">"Person"</font></span><span> )] </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">public</font></strong></span><span> </span><span class="keyword"><strong><font color="#006699">class</font></strong></span><span> Person </span>
</li>
<li class=""><span>{ </span></li>
<li class="alt">
<span> </span><span class="keyword"><strong><font color="#006699">private</font></strong></span><span> string _name = string.Empty; </span>
</li>
<li class="">
<span> </span><span class="keyword"><strong><font color="#006699">private</font></strong></span><span> </span><span class="keyword"><strong><font color="#006699">int</font></strong></span><span> _age = </span><span class="number"><font color="#c00000">0</font></span><span>; </span>
</li>
<li class="alt"><span> </span></li>
<li class="">
<span> [DataMember( IsRequired = </span><span class="keyword"><strong><font color="#006699">true</font></strong></span><span>, Name = </span><span class="string"><font color="#0000ff">"Name"</font></span><span> )] </span>
</li>
<li class="alt">
<span> </span><span class="keyword"><strong><font color="#006699">public</font></strong></span><span> string Name </span>
</li>
<li class=""><span> { </span></li>
<li class="alt">
<span> get { </span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> _name; } </span>
</li>
<li class=""><span> set { _name = value; } </span></li>
<li class="alt"><span> } </span></li>
<li class=""><span> </span></li>
<li class="alt">
<span> [DataMember( IsRequired = </span><span class="keyword"><strong><font color="#006699">true</font></strong></span><span>, Name = </span><span class="string"><font color="#0000ff">"Age"</font></span><span> )] </span>
</li>
<li class="">
<span> </span><span class="keyword"><strong><font color="#006699">public</font></strong></span><span> </span><span class="keyword"><strong><font color="#006699">int</font></strong></span><span> Age </span>
</li>
<li class="alt"><span> { </span></li>
<li class="">
<span> get { </span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> _age; } </span>
</li>
<li class="alt"><span> set { _age = value; } </span></li>
<li class=""><span> } </span></li>
<li class="alt"><span> </span></li>
<li class="">
<span> [DataMember( IsRequired = </span><span class="keyword"><strong><font color="#006699">true</font></strong></span><span>, Name = </span><span class="string"><font color="#0000ff">"Shoes"</font></span><span> )] </span>
</li>
<li class="alt">
<span> </span><span class="keyword"><strong><font color="#006699">public</font></strong></span><span> List<String> Shoes; </span>
</li>
<li class=""><span>} </span></li>
<li class="alt"><span> </span></li>
<li class=""><span> </span></li>
</ol>我们已经为 "Person”类的名称和命名空间标注上了契约，我们仍需要为属性授于数据成员特性，为每个属性 设置"IsRequired"并具体指定其名称。你只需要具体指定名字，如果它和属性名不一样。举例来说吧，如果你有一个属性叫作“Level”，但你在 数据成员特性中赋值为“Rank”，现在我们要回去修改我们的“DoWork()”方法，去接收Person对象作为参数。具体参下面代码块。
<ol class="dp-c">
<li class="alt"><span><span>[OperationContract] </span></span></li>
<li class=""><span>[WebGet( RequestFormat=WebMessageFormat.Json )] </span></li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">public</font></strong></span><span> </span><span class="keyword"><strong><font color="#006699">void</font></strong></span><span> DoWork(Person p) </span>
</li>
<li class=""><span>{ </span></li>
<li class="alt">
<span> </span><span class="comment"><font color="#008200">// Add your operation implementation here </font></span><span> </span>
</li>
<li class="">
<span> </span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span>; </span>
</li>
<li class="alt"><span>} </span></li>
<li class=""><span> </span></li>
</ol>对Web.Config文件进行配置:
我们仅需对web.config文件做出很小的修改就能对服务进行访问了。首先加入一个 serviceBehavior 用来允许Http Get请求，再添加一些调试选项帮助。代码如下：
Below </endpointBehaviors>
<ol class="dp-xml"> <li class="alt"><span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">serviceBehaviors</span><span class="tag">></span></font></strong><span> </span></span></li> <li class=""> <span> </span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">behavior</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">name</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"ServiceAspNetAjaxBehavior"</font></span><span class="tag"><strong><font color="#006699">></font></strong></span><span> </span> </li> <li class="alt"> <span> </span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">serviceMetadata</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">httpGetEnabled</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"true"</font></span><span> </span><span class="attribute"><font color="#ff0000">httpGetUrl</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">""</font></span><span> </span><span class="tag"><strong><font color="#006699">/></font></strong></span><span> </span> </li> <li class=""> <span> </span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">serviceDebug</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">httpHelpPageEnabled</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"true"</font></span><span> </span><span class="attribute"><font color="#ff0000">includeExceptionDetailInFaults</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"true"</font></span><span> </span><span class="tag"><strong><font color="#006699">/></font></strong></span><span> </span> </li> <li class="alt"> <span> </span><strong><font color="#006699"><span class="tag"></</span><span class="tag-name">behavior</span><span class="tag">></span></font></strong><span> </span> </li> <li class=""> <span></span><strong><font color="#006699"><span class="tag"></</span><span class="tag-name">serviceBehaviors</span><span class="tag">></span></font></strong><span> </span> </li> <li class="alt"><span> </span></li> </ol>
在<services>这里</services>之间，你的代码如下：
<ol class="dp-xml"> <li class="alt"><span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">service</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">name</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"Service"</font></span><span> </span><span class="attribute"><font color="#ff0000">behaviorConfiguration</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"ServiceAspNetAjaxBehavior"</font></span><span class="tag"><strong><font color="#006699">></font></strong></span><span> </span></span></li> <li class=""> <span> </span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">endpoint</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">address</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">""</font></span><span> </span><span class="attribute"><font color="#ff0000">behaviorConfiguration</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"ServiceAspNetAjaxBehavior"</font></span><span> </span> </li> <li class="alt"> <span></span><span class="attribute"><font color="#ff0000">binding</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"webHttpBinding"</font></span><span> </span><span class="attribute"><font color="#ff0000">contract</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"Service"</font></span><span> </span><span class="tag"><strong><font color="#006699">/></font></strong></span><span> </span> </li> <li class=""> <span> </span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">endpoint</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">address</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"mex"</font></span><span> </span><span class="attribute"><font color="#ff0000">binding</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"mexHttpBinding"</font></span><span> </span><span class="attribute"><font color="#ff0000">contract</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"IMetadataExchange"</font></span><span> </span><span class="tag"><strong><font color="#006699">/></font></strong></span><span> </span> </li> <li class="alt"> <span></span><strong><font color="#006699"><span class="tag"></</span><span class="tag-name">service</span><span class="tag">></span></font></strong><span> </span> </li> <li class=""><span> </span></li> </ol>
注意：
<ol class="dp-xml"><li class="alt"><span><strong><font color="#006699"><span class="tag"><</span><span class="tag-name">serviceDebug</span></font></strong><span> </span><span class="attribute"><font color="#ff0000">httpHelpPageEnabled</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"true"</font></span><span> </span><span class="attribute"><font color="#ff0000">includeExceptionDetailInFaults</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">"true"</font></span><span> </span><span class="tag"><strong><font color="#006699">/></font></strong></span><span> </span></span></li></ol>
允许例外可能会导致内部应用相关信息，包括个人信息的泄露。设置为true仅用于调试目的！
你的Web.config文件修改后如下图所示：
回到前端页面:
现在我们的服务已经被创建和配置了，再来关注前端页面部分吧（确保页面已引用jQuery.js文件），首先来创建一个简单的Json对象用于向service传递，我们在Person类结构的基础上创建该JSON对象。
<ol class="dp-c"><li class="alt"><span><span class="keyword"><strong><font color="#006699">var</font></strong></span><span> mydata = { </span><span class="string"><font color="#0000ff">"Name"</font></span><span>:</span><span class="string"><font color="#0000ff">"Denny"</font></span><span>, </span><span class="string"><font color="#0000ff">"Age"</font></span><span>:23, </span><span class="string"><font color="#0000ff">"Shoes"</font></span><span>:[</span><span class="string"><font color="#0000ff">"Nike"</font></span><span>,</span><span class="string"><font color="#0000ff">"Osiris"</font></span><span>,</span><span class="string"><font color="#0000ff">"Etnies"</font></span><span>] }; </span></span></li></ol>如果你对JSON还不是很熟悉，我们可以把它看作一个对象，这个小工具帮助你来查看 (JsonViewer):
我们需要使用WCF和jQuery进行Ajax通信，下面的代码创建了一个AJAX呼叫，在头部设置了GET方式，和内容类型为 application/json，将url的路径置为WCF 服务的 svc 文件，并在其后加上/和所要执行方法的名称，在这里我们要调用的是DoWork()方法，data是用来传递参数，为了让jQuery不去自动处理我们的 数据，将processData设为false，我们还加入了对success和error的处理，以更多的了解AJAX执行完之后的处理过程。
<ol class="dp-c">
<li class="alt"><span><span class="keyword"><strong><font color="#006699">function</font></strong></span><span> sendAJAX(data) { </span></span></li>
<li class=""><span> $.ajax({ </span></li>
<li class="alt">
<span> type: </span><span class="string"><font color="#0000ff">"GET"</font></span><span>, </span>
</li>
<li class="">
<span> contentType: </span><span class="string"><font color="#0000ff">"application/json"</font></span><span>, </span>
</li>
<li class="alt">
<span> url: </span><span class="string"><font color="#0000ff">"Service.svc/DoWork"</font></span><span>, </span>
</li>
<li class=""><span> data: data, </span></li>
<li class="alt">
<span> processData: </span><span class="keyword"><strong><font color="#006699">false</font></strong></span><span>, </span>
</li>
<li class="">
<span> success: </span><span class="keyword"><strong><font color="#006699">function</font></strong></span><span>(msg){ </span>
</li>
<li class="alt">
<span> alert( </span><span class="string"><font color="#0000ff">"Data Saved!"</font></span><span> ); </span>
</li>
<li class=""><span> }, </span></li>
<li class="alt">
<span> error:</span><span class="keyword"><strong><font color="#006699">function</font></strong></span><span>(XMLHttpRequest, textStatus, errorThrown){ </span>
</li>
<li class="">
<span> alert( </span><span class="string"><font color="#0000ff">"Error Occured!"</font></span><span> ); </span>
</li>
<li class="alt"><span> } </span></li>
<li class=""><span> }); </span></li>
<li class="alt"><span>} </span></li>
<li class=""><span> </span></li>
</ol>然而很不幸运，这里有一个小的问题，我们必须发送真正的JSON字符串，作为参数传递。但还没有简单的方法让JSON对象转换为字符串，如果你试了data.toString()，得到的会是一个 "[object Object]"值。这不是我们想要的。
所以在这里我们要修改方法使得它能将JSON转换成字符串。
<ol class="dp-c">
<li class="alt"><span><span class="keyword"><strong><font color="#006699">function</font></strong></span><span> json2string(strObject) { </span></span></li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">var</font></strong></span><span> c, i, l, s = </span><span class="string"><font color="#0000ff">''</font></span><span>, v, p; </span>
</li>
<li class="alt"><span> </span></li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">switch</font></strong></span><span> (</span><span class="keyword"><strong><font color="#006699">typeof</font></strong></span><span> strObject) { </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'object'</font></span><span>: </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (strObject) { </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (strObject.length && </span><span class="keyword"><strong><font color="#006699">typeof</font></strong></span><span> strObject.length == </span><span class="string"><font color="#0000ff">'number'</font></span><span>) { </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">for</font></strong></span><span> (i = 0; i < strObject.length; ++i) { </span>
</li>
<li class="alt"><span> v = json2string(strObject[i]); </span></li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (s) { </span>
</li>
<li class="alt">
<span> s += </span><span class="string"><font color="#0000ff">','</font></span><span>; </span>
</li>
<li class=""><span> } </span></li>
<li class="alt"><span> s += v; </span></li>
<li class=""><span> } </span></li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> </span><span class="string"><font color="#0000ff">'['</font></span><span> + s + </span><span class="string"><font color="#0000ff">']'</font></span><span>; </span>
</li>
<li class="">
<span> } </span><span class="keyword"><strong><font color="#006699">else</font></strong></span><span> </span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (</span><span class="keyword"><strong><font color="#006699">typeof</font></strong></span><span> strObject.toString != </span><span class="string"><font color="#0000ff">'undefined'</font></span><span>) { </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">for</font></strong></span><span> (i </span><span class="keyword"><strong><font color="#006699">in</font></strong></span><span> strObject) { </span>
</li>
<li class=""><span> v = strObject[i]; </span></li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (</span><span class="keyword"><strong><font color="#006699">typeof</font></strong></span><span> v != </span><span class="string"><font color="#0000ff">'undefined'</font></span><span> && </span><span class="keyword"><strong><font color="#006699">typeof</font></strong></span><span> v != </span><span class="string"><font color="#0000ff">'function'</font></span><span>) { </span>
</li>
<li class=""><span> v = json2string(v); </span></li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (s) { </span>
</li>
<li class="">
<span> s += </span><span class="string"><font color="#0000ff">','</font></span><span>; </span>
</li>
<li class="alt"><span> } </span></li>
<li class="">
<span> s += json2string(i) + </span><span class="string"><font color="#0000ff">':'</font></span><span> + v; </span>
</li>
<li class="alt"><span> } </span></li>
<li class=""><span> } </span></li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> </span><span class="string"><font color="#0000ff">'{'</font></span><span> + s + </span><span class="string"><font color="#0000ff">'}'</font></span><span>; </span>
</li>
<li class=""><span> } </span></li>
<li class="alt"><span> } </span></li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> </span><span class="string"><font color="#0000ff">'null'</font></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'number'</font></span><span>: </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> isFinite(strObject) ? String(strObject) : </span><span class="string"><font color="#0000ff">'null'</font></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'string'</font></span><span>: </span>
</li>
<li class=""><span> l = strObject.length; </span></li>
<li class="alt">
<span> s = </span><span class="string"><font color="#0000ff">'"'</font></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">for</font></strong></span><span> (i = 0; i < l; i += 1) { </span>
</li>
<li class="alt"><span> c = strObject.charAt(i); </span></li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (c >= </span><span class="string"><font color="#0000ff">' '</font></span><span>) { </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">if</font></strong></span><span> (c == </span><span class="string"><font color="#0000ff">'\\' || c == '</font></span><span>"') { </span>
</li>
<li class="">
<span> s += </span><span class="string"><font color="#0000ff">'\\'</font></span><span>; </span>
</li>
<li class="alt"><span> } </span></li>
<li class=""><span> s += c; </span></li>
<li class="alt">
<span> } </span><span class="keyword"><strong><font color="#006699">else</font></strong></span><span> { </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">switch</font></strong></span><span> (c) { </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'\b'</font></span><span>: </span>
</li>
<li class="">
<span> s += </span><span class="string"><font color="#0000ff">'\\b'</font></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">break</font></strong></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'\f'</font></span><span>: </span>
</li>
<li class="alt">
<span> s += </span><span class="string"><font color="#0000ff">'\\f'</font></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">break</font></strong></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'\n'</font></span><span>: </span>
</li>
<li class="">
<span> s += </span><span class="string"><font color="#0000ff">'\\n'</font></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">break</font></strong></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'\r'</font></span><span>: </span>
</li>
<li class="alt">
<span> s += </span><span class="string"><font color="#0000ff">'\\r'</font></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">break</font></strong></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'\t'</font></span><span>: </span>
</li>
<li class="">
<span> s += </span><span class="string"><font color="#0000ff">'\\t'</font></span><span>; </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">break</font></strong></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">default</font></strong></span><span>: </span>
</li>
<li class="alt"><span> c = c.charCodeAt(); </span></li>
<li class="">
<span> s += </span><span class="string"><font color="#0000ff">'\\u00'</font></span><span> + Math.floor(c / 16).toString(16) + </span>
</li>
<li class="alt"><span> (c % 16).toString(16); </span></li>
<li class=""><span> } </span></li>
<li class="alt"><span> } </span></li>
<li class=""><span> } </span></li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> s + </span><span class="string"><font color="#0000ff">'"'</font></span><span>; </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">case</font></strong></span><span> </span><span class="string"><font color="#0000ff">'boolean'</font></span><span>: </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> String(strObject); </span>
</li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">default</font></strong></span><span>: </span>
</li>
<li class="alt">
<span></span><span class="keyword"><strong><font color="#006699">return</font></strong></span><span> </span><span class="string"><font color="#0000ff">'null'</font></span><span>; </span>
</li>
<li class=""><span>} </span></li>
<li class="alt"><span>} </span></li>
<li class=""><span> </span></li>
</ol>现在我们有一个方法可以将JSON对象转成我们所需要的字符串，现在我们回过头去修改我们之前定义的 "mydata" 变量，我们应当按下面去应用所写的json2string方法。
<ol class="dp-c">
<li class="alt"><span><span class="keyword"><strong><font color="#006699">var</font></strong></span><span> mydata = { </span><span class="string"><font color="#0000ff">"Name"</font></span><span>:</span><span class="string"><font color="#0000ff">"Denny"</font></span><span>, </span><span class="string"><font color="#0000ff">"Age"</font></span><span>:23, </span><span class="string"><font color="#0000ff">"Shoes"</font></span><span>:[</span><span class="string"><font color="#0000ff">"Nike"</font></span><span>,</span><span class="string"><font color="#0000ff">"Osiris"</font></span><span>,</span><span class="string"><font color="#0000ff">"Etnies"</font></span><span>] }; </span></span></li>
<li class="">
<span></span><span class="keyword"><strong><font color="#006699">var</font></strong></span><span> jsonStr = </span><span class="string"><font color="#0000ff">"p="</font></span><span> + json2string(mydata); </span>
</li>
</ol>注意在下面我准备了"p=" 字符在我们的JSON字符串中，“p”对应于"DoWork()" 方法中的参数，当我们将参数改名为"Dude" ( 例如DoWork(Person Dude) )时，我们也必须将此处替换为"Dude="
现在我们准备好了查询字符串，我们参看到我们如何调用服务：
<ol class="dp-xml"><li class="alt"><span><span>http://www.dennydotnet.com/Service.svc/DoWork/?</span><span class="attribute"><font color="#ff0000">p</font></span><span>={ "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] } </span></span></li></ol>你将接收到一个已经为URL编码处理过的值，如下：
<ol class="dp-xml"><li class="alt"><span><span>http://www.dennydotnet.com/Service.svc/DoWork/?</span><span class="attribute"><font color="#ff0000">p</font></span><span>=%7b+%22Name%22%3a%22Denny%22%2c+%22Age%22%3a23%2c+%22Shoes%22%3a%5b%22Nike%22%2c%22Osiris%22%2c%22Etnies%22%5d+%7d%3b </span></span></li></ol>
紧接着我们去调用"SendAjax()" javascript 方法，现在能够调试我们的服务并验证数据是否被传递到服务。如下图
相关推荐
EdwardSiCong 0喜欢 / 0评论 2020-11-23
85477104 0喜欢 / 0评论 2020-11-17
hhanbj 0喜欢 / 0评论 2020-11-17
81427005 0喜欢 / 0评论 2020-11-11
seoppt 0喜欢 / 0评论 2020-09-13
honeyth 0喜欢 / 0评论 2020-09-13
WRITEFORSHARE 0喜欢 / 0评论 2020-09-13
84483065 0喜欢 / 0评论 2020-09-11
momode 0喜欢 / 0评论 2020-09-11
85477104 0喜欢 / 0评论 2020-08-15
83510998 0喜欢 / 0评论 2020-08-08
82550495 0喜欢 / 0评论 2020-08-03
tthappyer 0喜欢 / 0评论 2020-08-03
84901334 0喜欢 / 0评论 2020-07-28
tthappyer 0喜欢 / 0评论 2020-07-25
TONIYH 0喜欢 / 0评论 2020-07-22
tztzyzyz 0喜欢 / 0评论 2020-07-20
83510998 0喜欢 / 0评论 2020-07-18
81463166 0喜欢 / 0评论 2020-07-17
tztzyzyz 0喜欢 / 0评论 2020-07-05
tthappyer 0喜欢 / 0评论 2020-07-04
87281248 0喜欢 / 0评论 2020-07-04
87281248 0喜欢 / 0评论 2020-07-04
82244951 0喜欢 / 0评论 2020-06-28
delmarks 0喜欢 / 0评论 2020-06-28
89510194 0喜欢 / 0评论 2020-06-27
89510194 0喜欢 / 0评论 2020-06-27
wcqwcq 0喜欢 / 0评论 2020-06-26
88570299 0喜欢 / 0评论 2020-06-26
小仙儿 0喜欢 / 0评论 2020-06-25
88570299 0喜欢 / 0评论 2020-06-18
delmarks 0喜欢 / 0评论 2020-06-14
牵手白首 0喜欢 / 0评论 2020-06-14
83510998 0喜欢 / 0评论 2020-06-14
ppsurcao 0喜欢 / 0评论 2020-06-14
tianzyc 0喜欢 / 0评论 2020-06-13
82244951 0喜欢 / 0评论 2020-06-12
89510194 0喜欢 / 0评论 2020-06-11
83510998 0喜欢 / 0评论 2020-06-11
开心就好 0喜欢 / 0评论 2020-06-10
tthappyer 0喜欢 / 0评论 2020-06-07
delmarks 0喜欢 / 0评论 2020-06-07
牵手白首 0喜欢 / 0评论 2020-06-07