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

Question

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?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

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

Sign up