Today I am going to explain how to consume WCF service using .ajax() jquery method. First of all add below tags in Web.config to call wcf service.

<system.serviceModel>

<behaviors>

<serviceBehaviors>

<behavior name="ServiceBehavior">

<serviceMetadata httpGetEnabled="true"/>

<serviceDebug includeExceptionDetailInFaults="true"/>

</behavior>

</serviceBehaviors>

<endpointBehaviors>

<behavior name="EndpBehavior">

<webHttp/>

</behavior>

</endpointBehaviors>

</behaviors>

<services>

<service behaviorConfiguration="ServiceBehavior" name="Service">

<endpoint address="" binding="webHttpBinding"

contract="IService" behaviorConfiguration="EndpBehavior"/>

</service>

</services>

</system.serviceModel>

Now In Iservice.cs
You have to add below code above the Method declaration like :

[OperationContract]

[WebInvoke(Method = "POST",

BodyStyle = WebMessageBodyStyle.Wrapped,

ResponseFormat = WebMessageFormat.Json)]

string DoWork(string str);

Now In service.cs
You have to add below code above of class declaration.

[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]

Now In Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<script src="jquery-1.4.2.min.js" temp_src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

function CallService() {

var txtValue = $("#TextBox1").val();

$.ajax({

type: "POST", //GET or POST or PUT or DELETE verb

url: "Service.svc/DoWork", // Location of the service

data: '{"str": "' + txtValue + '"}', //Data sent to server

contentType: "application/json; charset=utf-8", // content type sent to server

dataType: "json", //Expected data format from server

processdata: true, //True or False

success: function (msg) {//On Successfull service call

alert(msg.DoWorkResult);

}

});

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="TextBox1" runat="server" onkeyup="CallService();"></asp:TextBox>

</div>

</form>

</body>

</html>

Description
When you run attached application. you will see a textbox on the web page. when you write any text in the textbox
at that time a alert fire with your text which you inserted in textbox.
Please find below attachment to know further Operations.