How do i read simple json result with jquery and how to post new

I built a WCF service which produces JSON. I want to make an external website which uses this webservice. For now I am executing the WCF service over LAN by IIS, so I can connect to the service by going to http://myownaddress/blabla.svc/

I tried to learn some json and to get some results from my service.

For example if I want to use this method:

        [OperationContract]
        [WebInvoke(Method = "GET",
            ResponseFormat = WebMessageFormat.Json,
            BodyStyle = WebMessageBodyStyle.Wrapped,
            UriTemplate = "json/{id}")]
        string JSONData(string id);

I'll go to http://myownaddress/blabla.svc/json/123 And as result I get: {"JSONDataResult":"You requested product 123"}

Now I have tried to receive this result with the JQuery statement getJSON. But I don't see any results.

My question is how can I get this simple data?

And secondly how can I post data(with javascript) back on to the wcf service is it also possible with json?

-edit-:

I have now updated my code and put this into my document ready function which is located between the <head> <script> .... on my page:

$.getJSON(
           'http://myownaddress/blabla.svc',
            function(data) 
            {
               alert(data.JSONDataResult);
            });

But this won't give the alert with the result. It doesn't even give an alert.. Besides that, in the function I need to give a parameter of id, so for example 123 (look in text above) don't I need to put that in the function also?

Solution

To get data use getJSON():

$.getJSON(
    'http://myownaddress/blabla.svc/',
    function(data) {
        alert(data.JSONDataResult);
    }
);

To post data you can use this:

$.post('http://myownaddress/postservice.svc', function(data) {
  $('.result').html(data);
});

or this (if you need more control):

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

You can also use the ajax for getting the data instead of the getJSON method .

UPDATE:

try using ajax method as it gives you more control:

 $.ajax({
      type: 'GET',
      url: "http://myownaddress/blabla.svc/json/123",
      success: function(data){alert(data)},
      dataType: "json",
      complete: function(data){alert(data)},
      error: function(jqXHR, textStatus, errorThrown){alert(errorThrown)}
    });

Also, if you use firefox, check out firebug extension, it will help you greatly. If you use chrome then use chrome developer tools.