How to pass parameters to a WCF Rest service's method from javascript client?

Question

I have a wcf service runing which contains a method that returns a string. I am able to run the service in the browser successfully. Moreover I can even pass the required parameters and can see the result in the browser.

But when i am trying to invoke the same method from javascript client the parameter value does not get passed to the method and hence it returns nothing.

Here is what my service retuns when run from the browser enter image description here

Here is my interface Implementation:

 [OperationContract]

            [WebInvoke(Method = "GET",
            ResponseFormat = WebMessageFormat.Json,
            BodyStyle = WebMessageBodyStyle.Wrapped)]
            string JSONData(string id);

Here is my service Method implementation code:

public string JSONData(string id)
    {
        if (id == null || id == "")
        {
            return "Id is null";
        }
        else
        {
            return "You requested product " + id;
        }
    }

As shown above service works fine fine a parameter is passed from the url. However when I make the call using jquery's function parameter doesnot get passed Here is my javascript client's code:

<script type="text/javascript">
        // A $( document ).ready() block.
        $(document).ready(function () {
            // alert("pass");
            var valu = "123";
            $("#btnclick").click(function () {
                debugger;
                $.ajax({
                    cache: false,
                    type: "GET",
                    async: false,
                    url: "http://localhost:35798/RestServiceImpl.svc/JSONData",
                    data: JSON.stringify(valu),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (result) {
                        var ans = JSON.stringify(result);
                        alert("success");
                        alert(ans);
                    },
                    error: function (xhr) {
                        alert("error");
                        alert(xhr.responseText);
                    }
                });
            });
        });

    </script>

I want to be able to pass the parameter from the jquery code. Any suggestions to get this working would be really appreciated.

Josef P. · Accepted Answer · 2015-07-05 14:07:49Z

1

valu needs to be a key value pair:

var valu = {id:"123"};

Or a string:

var value = 'id="123"';

In order to currently form the proper request.

Pass it as a plain JavaScript object in the first case, do not stringify it. If you do jquery will append it as a string to the request.

Use the network debugging tools in your browser to work through these sorts of issues.

This will correctly serialise your query string to /JSONData?id=123 as opposed to your solution which produces /JSONData/"123"

Your code with edits...

<script type="text/javascript">
    // A $( document ).ready() block.
    $(document).ready(function () {
        // alert("pass");
        var valu = {id: "123"};
        $("#btnclick").click(function () {
            debugger;
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: "http://localhost:35798/RestServiceImpl.svc/JSONData",
                data: valu,
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    var ans = JSON.stringify(result);
                    alert("success");
                    alert(ans);
                },
                error: function (xhr) {
                    alert("error");
                    alert(xhr.responseText);
                }
            });
        });
    });

</script>

edited Jul 5, 2015 at 14:07

Josef P.

2451 silver badge12 bronze badges

answered Jul 5, 2015 at 12:04

Robert Moskal

22.7k8 gold badges69 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jasmine Over a year ago

@Gdroid: I have exactly same code from code project for service and tried to copy your jquery in a blank client page html and kept Rober's correct jquery code in the body section. I am new to ASP.NET please help me how to ensure this runs? I have this page created in the WCF solution downloaded from the codeproject

G droid Over a year ago

you can run the html page in a browser and open Element Inspector window using F12 key and then under the console tab you can find the response you are getting if it says 200 then its working...

Collectives™ on Stack Overflow

How to pass parameters to a WCF Rest service's method from javascript client?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related