首先需要在后台返回Json格式的数据，.net中处理Json数据的API，添加一个dll的链接库，如图：
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using Newtonsoft.Json;
namespace WCFTest2
{
// 注意: 使用“重构”菜单上的“重命名”命令，可以同时更改代码、svc 和配置文件中的类名“WCFservice”。
// 注意: 为了启动 WCF 测试客户端以测试此服务，请在解决方案资源管理器中选择 WCFservice.svc 或 WCFservice.svc.cs，然后开始调试。
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class WCFservice
{
[OperationContract]
[WebInvoke(RequestFormat = Webmessageformat.Json,ResponseFormat = Webmessageformat.Json,BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string InsertRow(int id,string title,string content)
{
string data = string.Format("您输入的标题是：{0}<br/><br/>您输入的内容是：{1}<br/><br/>此文章的id是：{2}",title,content,id.ToString());
var jsonStr = JsonConvert.SerializeObject(data);
return jsonStr;
}
}
}
前端代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function callServer(){
var id = Number($("#id").val());
var title = String($("#title").val());
var content = String($("#content").val());
$.ajax({
type: 'post',url: '/WCFservice.svc/InsertRow',contentType: 'text/json',data: '{"id":' + id + ',"title":"' + title + '","content":"' + content + '"}',success: function (data) {
$.each(data,function (i,n) {
alert(n);
$("#divContent").prepend("<p>"+n+".</p> ");
});
}
});
}
</script>
<style type="text/css">
#content{height: 181px;width: 549px;}
#title{width: 544px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
文章标题：<input type="text" id="title" />
<br />
文章内容：<textarea id="content"></textarea>
<input type="hidden" id="id" value="1" /><br />
<input type="button" value="提交" onclick="callServer();" />
</div><br />
<div id="divContent"></div>
<p></p>
</form>
</body>
</html>
config配置：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="AllenBehavior">
<enableWebScript />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior name="">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
</behavior>
</serviceBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
multipleSiteBindingsEnabled="true" />
<services>
<service name="WCFTest2.WCFservice">
<endpoint address="" behaviorConfiguration="AllenBehavior" binding="webHttpBinding" contract="WCFTest2.WCFservice" />
</service>
</services>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
<!--
若要在调试过程中浏览 Web 应用程序根目录，请将下面的值设置为 True。
在部署之前将该值设置为 False 可避免泄露 Web 应用程序文件夹信息。
-->
<directorybrowse enabled="true"/>
</system.webServer>
</configuration>
实现效果：