安科网

jQuery调用WCF服务传递JSON对象

yingzhicai

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）
jQuery调用WCF服务传递JSON对象

在我们添加完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调用WCF服务传递JSON对象

回到前端页面:

现在我们的服务已经被创建和配置了，再来关注前端页面部分吧（确保页面已引用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):

jQuery调用WCF服务传递JSON对象

我们需要使用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 方法，现在能够调试我们的服务并验证数据是否被传递到服务。如下图

jquery wcf ajax

yingzhicai

yingzhicai

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

jQuery Ajax 操作函数汇总

jQuery 库拥有完整的 Ajax 兼容套件。执行异步 HTTP 请求。当 Ajax 请求完成时注册要调用的处理程序。在 Ajax 请求发送之前显示一条消息。使用 HTTP POST 请求从服务器加载数据。

TONIYH 2020-07-22

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

public static string GetValueAjax//这个方法需要是静态的方法要用到关键字static. json=" + username,//ajaxtest.ashx为目标文件

83510998 2020-07-18

jQuery ajax - ajax() 方法中的一些属性

jQuery ajax - ajax() 方法中的一些属性

Web全栈笔记 2020-07-06

Jquery属性和元素操作，ajax

after() 在备选元素之后插入内容，同步即指一件事干完之后再干下一件事，这是在设计ajax时基于安全的考虑，其实就相当于从页面上发送http请求，先通过js代码加密，然后通过ajax发送请求。dataType:‘json‘, // 期望后台返回的数

wcqwcq 2020-06-26

Jquery中的Ajax

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。至于技术

delmarks 2020-06-14

Jquery ajax书写方法代码实例解析

Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。　　可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery绑定了ajax

ppsurcao 2020-06-14

JQuery使用Ajax调用后台方法

data: "{‘str‘:‘aaa‘,‘str2‘:‘bbb‘}",

春雨的雕刻时光 2020-06-08

jQuery中的Ajax

data: { name: ‘zhangsan‘, age: ‘20‘ },如果想要传递json格式的属性，需要将contentType设置为application/json，并且在data属性中传递一个json字符串。beforesend方法允许我们在请

tthappyer 2020-06-07

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

EdwardSiCong 2020-11-23

详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。比如你想修改div#app里的内容:. 在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行

85477104 2020-11-17

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj 2020-11-17

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 2020-11-11

jQuery实现带进度条的轮播图

margin: 0;padding: 0;list-style: none;width: 100%;height: 600px;position: relative;width: 100%;height: 600px;position: absolute;

seoppt 2020-09-13

jQuery实现鼠标拖拽登录框移动效果

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>. $(&

honeyth 2020-09-13

jquery实现简易验证插件封装

<input type="text" id="username" name="username" tabindex="1" class="format-inpu

WRITEFORSHARE 2020-09-13

jQuery实现朋友圈查看图片

<a href="images/img1-large.png" style="background-image:url" title="图片一"></a>

84483065 2020-09-11

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode 2020-09-11

jQuery中event.target和this的区别详解

　　1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；　　2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$和$.比如,

85477104 2020-08-15

9.jQuery初识—选择器、效果

书写繁琐，代码量大。动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。浏览器的兼容性。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。插件扩展开发，jQuery有着丰富的第三方插件，

83510998 2020-08-08

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

82550495 2020-08-03
yingzhicai

yingzhicai

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号