The following example uses the JQuery JavaScript library within a browser to query a Teradata Database and display the results on a web page. The web page displays the databases on the target Teradata System ordered by size. Though only displayed as a JSON result set in the example, the results could be displayed visually using a library such as D3.
<!DOCTYPE html>
<html>
<head>
<title>Query Service Example Using JQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function()
{
var username = 'myuser';
var password = 'mypassword';
var sql = "SELECT TRIM(DatabaseName) AS \"Database\", PermSpace AS \"Size\" FROM dbc.databases ORDER BY 2 DESC;"
var url = "http://sdl57120.labs.teradata.com:1080/systems/mysystem/queries"
$.ajax({
type: "POST",
url: url,
contentType: "application/json",
headers: {
'Accept' : "application/vnd.com.teradata.rest-v1.0+json",
'Authorization': 'Basic ' + btoa(username + ':' + password)
},
data: JSON.stringify({
query: sql,
format: 'object'
}),
}).done(function (data)
{
$("#message").text("RESULTS: SUCCESS");
$("#result").append(JSON.stringify(data, null, 2));
}).fail (function (error)
{
$("#message").text("RESULTS: ERROR, HTTP Code: " + error.status);
$("#result").append(JSON.stringify(error.responseJSON, null, 2));
})
$("#query").text("Executing query: " + sql);
})
</script>
</head>
<body>
<div>
<span id="query"></span>
</div>
<div>
<span id="message"></span>
<pre id="result"></pre>
</div>
</body>
</html>