I wrote a small html/js as shown below:
<!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>
<title></title>
<link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="datajs-1.0.1.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<script type="text/javascript" 开发者_运维问答src="DataJSCRUD.js"></script>
</head>
<body>
<div class="page">
<div class="header">
<div class="title">
<h1>
OData Javascript Consumer
</h1>
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div class="main">
<div id="customers-contain" class="ui-widget">
<h1>
Customers:</h1>
<table id="customers" class="ui-widget ui-widget-content">
<tr class="ui-widget-header ">
<th>
CustomerID
</th>
<th>
CompanyName
</th>
<th>
ContactTitle
</th>
<th>
Address
</th>
<th>
City
</th>
</tr>
</table>
<span id="loadingCustomers" style="display: none">Loading...</span>
</div>
</div>
<div class="clear">
</div>
<div class="footer">
</div>
</div>
<script type="text/javascript">
$(OnPageLoad)
</script>
</body>
</html>
DataJSCRUD.js
/// <reference path="jquery-1.4.1-vsdoc.js" />
//ODATA Root Service URI
var CUSTOMERS_ODATA_SVC = "http://services.odata.org/Northwind/Northwind.svc/Customers";
//Page Load Actions
function OnPageLoad()
{
GetCustomers();
}
//Page Events:
//***********************Get Customers (READ)***************************
//Gets all the Customers from service
function GetCustomers()
{
$("#loadingCustomers").show();
alert("ok");
OData.read(CUSTOMERS_ODATA_SVC, GetCustomersCallback);
}
//GetCustomers Success Callback
function GetCustomersCallback(data, request)
{
$("#loadingCustomers").hide();
$("#customers").find("tr:gt(0)").remove();
ApplyTemplate(data.results)
}
//*************************Helper Functions***************************
//Helper function to apply UI template
function ApplyTemplate(data)
{
var template = "<tr id=\"customerRow${CustomerID}\">" +
"<td>${CustomerID}</td>" +
"<td>${CompanyName}</td>" +
"<td>${ContactTitle}</td>" +
"<td>${Address}</td>" +
"<td>${City}</td>" +
"</tr>";
$.tmpl(template, data).appendTo("#customers tbody");
}
Could not understand what went wrong here.
Got it. Have to add the following line:
OData.defaultHttpClient.enableJsonpCallback = true;
Hopefully, this would help others.
精彩评论