Ep

Ep

How to Consume a WCF RestFul Service in jQuery via AJAX Call

ASP.Net - Consuming WCF Rest Service using jQuery AJAX



In this article I will explain how to consume WCF Rest using jQuery AJAX or consuming WCF Service using JavaScript and jQuery in asp.net. Find the source code below:

Calling WCF Service using jQuery AJAX on Client Side, client side application,jQuery Ajax Calling,

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to Consume a WCF RestFul Service in jQuery via AJAX Call</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost/Restful_WCF_Service/Create_Restful_WCF_Service.svc/GetCustomerListXML",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('Customer').each(function () {
                        var id = $(this).find('CustomerId').text();
                        var name = $(this).find('CustomerName').text();
                        var add = $(this).find('CustomerAddress').text();
                        $('<tr><td>' + id + '</td><td>' + name + '</td><td>' + add + '</td>').appendTo('#customersxml');
                    });
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        });

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost/Restful_WCF_Service/Create_Restful_WCF_Service.svc/GetCustomerListJSON",
                dataType: "json",
                success: function (json) {
                    for (var i = 0; i < json.length; i++) {
                        var id = json[i].CustomerId;
                        var name = json[i].CustomerName;
                        var add = json[i].CustomerAddress;
                        $('<tr><td>' + id + '</td><td>' + name + '</td><td>' + add + '</td>').appendTo('#customersjson');
                    }

                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <div>
                        <b>From XML Data Format</b>
                        <table border='1' id="customersxml">
                            <!-- XML -->
                            <tr>
                                <td>
                                    <b>Id</b>
                                </td>
                                <td>
                                    <b>Name</b>
                                </td>
                                <td>
                                    <b>Address</b>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td>
                </td>
                <td>
                    <div>
                        <b>JSON Data Format</b>
                        <table border='1' id="customersjson">
                            <!-- JSON -->
                            <tr>
                                <td>
                                    <b>Id</b>
                                </td>
                                <td>
                                    <b>Name</b>
                                </td>
                                <td>
                                    <b>Address</b>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <br />
    <br />
    <div>
    </div>
    </form>
</body>
</html>
Download the source code, click here
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading .. :)
How to Consume a WCF RestFul Service in jQuery via AJAX Call Reviewed by Ravi Kumar on 6:16:00 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.