gliese 581 g gliese 581 g - 1 year ago 100
jQuery Question

JQuey ajax call to WCF JSON service not working

I have a simple WCF service which returns a list of strings in JSON format.
The WCF service code is given below:


<service name="WcfServiceProto.Service1" behaviorConfiguration="ServiceBehavior1">
<endpoint address="" binding="webHttpBinding" contract="WcfServiceProto.IService1" behaviorConfiguration="EndPointBehavior"/>
<!--<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>-->
<behavior name="ServiceBehavior1">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="true"/>
<behavior name="EndPointBehavior">
<webHttp />
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />


[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1 : IService1
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public List<string> AutoCompleteSearch(string query)
List<string> data = new List<string>(new string[] { "AB11", "AB12", "AB13", "BC11", "BC12", "BC13", "BC14", "CD11", "CD12", "CD13", "CD14", "CD15", "CD16", "CD17",
List<string> results = data.Where(item => item.ToUpper().StartsWith(query.ToUpper())).ToList();
return results;

I am trying to call this service using JQuery ajax as given below:

$(document).ready(function () {
function SearchText() {
source: function (request, response) {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://localhost:59227/Service1.svc/AutoCompleteSearch",
data: JSON.stringify({ query: $('#Tags').val() }),
dataType: "json",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data, function (item) {
return { value: item };
error: function (XMLHttpRequest, textStatus, errorThrown) {

However I do not see the list as I type in the textbox. I only see an alert with text "error" on it and no error details. I have also inserted breakpoint in WCF service but it never gets hit. Please let me know what I am doing wrong over here.

Browser console log:


Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encodingg zip, deflate
Accept-Language en-US,en;q=0.5
Access-Control-Request-Headers content-type
Access-Control-Request-Method POST
Connection keep-alive
Host localhost:59227
Origin http://localhost:49910
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101

Answer Source

Provide the WebInvoke attributes over your Operational Contract (method in interface IService1). Also try setting UriTemplate propery as well. IMO, this should ideally be a GET request, not POST.

[WebInvoke(Method=“GET”, ResponseFormat=WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.Wrapped, UriTemplate=“AutoCompleteSearch?query={query}” )]

Once you have modified your service layer, update your $.ajax to use GET as type/ use $.get() and pass the argument as query string with name "query".

function SearchText() {
            source: function (request, response) {
                var url = "http://localhost:59227/Service1.svc/AutoCompleteSearch?query="+$('#Tags').val();
                  .done(function(data){ // your success code goes here})
                  .fail(function(ex){ // you failure code goes here});

I havent tested the $.get method, have a look here in case you have any issues -

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download