How to Consume a WCF RestFul Service in jQuery via AJAX Call
ASP.Net - Consuming WCF Rest Service using jQuery AJAX
In the previous articles I explained About WCF - An Introduction with Example, Creating WCF REST Services in ASP.NET Web Based Applications, Consume Restful WCF service in ASP.NET Server Side Web Application Examples.
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:
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 PM
Rating:
Reviewed by Ravi Kumar
on
6:16 PM
Rating:
No comments: