2

I have a WCF service hosted/published on the below path -

newslettersubscriptiondev.mercola.com/NewsletterSubscriptionService.svc

Want to call above WCF service in Jquery Ajax Call

Code written in jQuery -

<script type="text/javascript" src="JS/jquery-2.1.4.js"></script>
<script type="text/javascript" src="JS/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    function cityClickJQuery() {
        $.ajax({
            type: "POST",
            url: "http://newslettersubscriptiondev.mercola.com/NewsletterSubscriptionService.svc/CheckEmailaddressValidateOnly",
            data: { EmaillAddress: '[email protected]', Source: 'ArticleBody' },
            processData: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                alert('success');
                alert(data.d);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                alert(jqXHR);
            }
        });
    }

</script>

In the above JS code CheckEmailaddressValidateOnly is the C# method defined in Service which requires 2 parameters.

Design code -

    <body>
        <form id="form1" runat="server">
        <div>
        <asp:Button ID="btn1" runat="server" OnClientClick="cityClickJQuery();" Text="click" />
        </div>
        </form> 
  </body>

Above JS code is not working.

Please Help.

15
  • Also: Is it really mean to be emaillAddress with two l's? Commented Nov 20, 2015 at 11:00
  • @TrueBlueAussie How can i make public so that you could test it.... Commented Nov 20, 2015 at 11:07
  • Is that service actually running at the moment? As you are using Visual studio you should be able to test the service using the WCF Test Client first Commented Nov 20, 2015 at 11:08
  • @TrueBlueAussie The emaillAddress which i passed as a parameter is used as a parameter in [OperationContract] of interface or should i use the actual parameter passed to the method? i am totally confused. Commented Nov 20, 2015 at 11:11
  • I was just pointing out that it was miss-spelt. So best to fix it everywhere :) Commented Nov 20, 2015 at 11:13

2 Answers 2

2

First you should verify that you include attribute

[WebInvoke (ResponseFormat = WebMessageFormat.Json)]

Second you should use

data:JSON.stringify({EmaillAddress: '[email protected]', Source: 'ArticleBody'}), 

The JSON.stringify is defined in http://www.json.org/js.html.

One more update After the successful return of data you will see that the data returned back should be accessed not with data.d.EmailAddress, but with data.EmailAddress instead. ASMX web-service place the data in the property d, but not WCF service.

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

3 Comments

Why is stringify required? the Ajax call will convert an anonymous object to a JSON string based on the dataType specified anyway.
@Shahid - Where i need to include [WebInvoke (ResponseFormat = WebMessageFormat.Json)]
@PranavBilurkar You have to place this before your method in WCF service for proper usage you can refer to this article codeproject.com/Articles/386956/…
0

Change data: { EmaillAddress: '[email protected]', Source: 'ArticleBody' }, To

data: JSON.stringify({ EmaillAddress: '[email protected]', Source: 'ArticleBody' }),

2 Comments

This is not needed as the datatype is specified as JSON and conversion will occur automatically from an anonymous object.
@TrueBlueAussie this would be the expected result, but unfortunately it doesn't ALWAYS work as intended. I've run into a couple situations where I needed to explicitly call JSON.stringify(). Most notably when the property name isn't surrounded by single quotes. I.E.{ EmailAddress: 'blah' } instead of { 'EmailAddress': 'blah' }. But it's pretty bipolar as to when it wants to be difficult, so it's just best to play it safe.