Why doesn't my WCF call return JSON?

Question

I've followed online examples from here and Google with no success: meaning I have experimented with various configurations to no avail.

Any help is sincerely appreciated.

THANKS!

UPDATE:
I really just want to capture JSON from the web-service. So, if I don't HAVE to configure the WCF service as a REST-ful service, then that is okay with me.

THE HTML SIDE LOOKS LIKE:

<script type="text/javascript">
    <!--
        var pageController =
        (function ($) {
            var publicInstances = {};

            publicInstances.controller = controller;
            function controller() {

                var self = this;

                self.form = null;
                self.wcfService = 'http://localhost:2798/Service.svc';

                self.Type = null;           // GET or POST or PUT or DELETE verb
                self.Url = null;            // Location of the service
                self.Data = null;           // Data sent to server
                self.ContentType = null;    // Content type sent to server
                self.DataType = null;       // Expected data format from server
                self.ProcessData = null;    // True or False

                this.initialize = function () {
                    self.form = new form(self);
                };

                this.invoke = function (onSuccess) {
                    $.ajax({
                        type: self.Type,
                        url: self.Url,
                        data: self.Data,
                        contentType: self.ContentType,
                        dataType: self.DataType,
                        processData: self.ProcessData,
                        complete: self.onComplete,
                        error: self.onError,
                        success: onSuccess
                    });
                };
                this.onComplete = function (xmlHttpRequest, status) {
                    alert("onComplete");
                };
                this.onError = function (xmlHttpRequest, status, error) {
                    alert("onError");
                };

                this.listPeople = function () {
                    self.Type = 'POST';
                    self.Url = self.wcfService + '/ListPeople';
                    self.Data = null;
                    self.ContentType = 'application/json; charset=utf-8';
                    self.DataType = 'json';
                    self.ProcessData = true;

                    self.invoke(self.dataBindListPeople);
                };
                this.dataBindListPeople = function (data, status, xmlHttpRequest) {
                    // This runs but no repsonse exists???
                    alert("dataBindListPeople");
                };

                self.initialize();
            };

            publicInstances.form = form;
            function form(controller) {

                var self = this;

                self.controller = controller;

                self.btnListPeople = $('#btnListPeople');

                this.initialize = function () {
                    self.btnListPeople.click(self.listPeople);
                };

                this.validate = function () { return true; };
                this.disable = function () { };
                this.enable = function () { };

                this.listPeople = function () {
                    if (self.validate());
                    self.controller.listPeople();
                };

                this.populateListPeople = function (json) {
                    alert("populateListPeople");
                };

                self.initialize();
            };

            return publicInstances;
        })(jQuery);

        var defaultPage = null;

        $j(document).ready(function () {
            defaultPage = new pageController.controller();
            var stop = "";
        });
    -->
    </script>

<input type="button" id="btnListPeople" value="List People" />

THE web.config LOOKS LIKE:
This was automatically created when I added the SERVICE REFERENCE into the project.

  <system.serviceModel>
    <bindings>
      <basicHttpBinding>
        <binding name="BasicHttpBinding_IService" 
                 closeTimeout="00:01:00"
                 openTimeout="00:01:00" 
                 receiveTimeout="00:10:00" 
                 sendTimeout="00:01:00"
                 allowCookies="false" 
                 bypassProxyOnLocal="false" 
                 hostNameComparisonMode="StrongWildcard"
                 maxBufferSize="65536" 
                 maxBufferPoolSize="524288" 
                 maxReceivedMessageSize="65536"
                 messageEncoding="Text" 
                 textEncoding="utf-8" 
                 transferMode="Buffered"
                 useDefaultWebProxy="true">
          <readerQuotas maxDepth="32" 
                        maxStringContentLength="8192" 
                        maxArrayLength="16384"
                        maxBytesPerRead="4096" 
                        maxNameTableCharCount="16384" />
          <security mode="None">
            <transport clientCredentialType="None" proxyCredentialType="None" realm="" />
            <message clientCredentialType="UserName" algorithmSuite="Default" />
          </security>
        </binding>
      </basicHttpBinding>
    </bindings>
    <client>
      <endpoint address="http://localhost:2798/Service.svc" 
                binding="basicHttpBinding"
                bindingConfiguration="BasicHttpBinding_IService" 
                contract="ServiceReference1.IService"
                name="BasicHttpBinding_IService" />
    </client>
  </system.serviceModel>

THE WCF SERVICE SIDE LOOKS LIKE:

namespace WcfService
{
    [ServiceContract]
    public interface IService
    {
        [OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
        List<Person> ListPeople();
    }
}

namespace WcfService
{
    [DataContract]
    public class Person
    {
        public Person(string firstName, string lastName, int age)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Age = age;
        }

        [DataMember]
        public string FirstName { get; set; }

        [DataMember]
        public string LastName { get; set; }

        [DataMember]
        public int Age { get; set; }
    }
}

namespace WcfService
{
    [ServiceBehavior]
    public class Service : IService
    {
        public List<Person> ListPeople()
        {
            List<Person> people = new List<Person>();
            people.Add(new Person("Peyton", "Manning", 35));
            people.Add(new Person ("Drew", "Brees", 31));
            people.Add(new Person("Brett", "Favre", 58));

            return people;
        }
    }
}

Answer 1

You're mixing two incompatible worlds here...

1) in your config you define basicHttpBinding - this is a SOAP binding, and SOAP is not well suited to be called from jQuery or Javascript. It typically also returns XML (not JSON)

2) in your service contract however, you seem to be referring to REST-based WCF:

 [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, 
            ResponseFormat = WebMessageFormat.Json)]

but in order for this to work, you need to use the REST-based binding - webHttpBinding (and possibly the suitable WebServiceHostFactory and/or possibly the <webHttp /> endpoint behavior.

You should go to the WCF REST Developer Center on MSDN to learn how to properly set up a REST WCF Service that will return JSON to your callers!