Click here to Skip to main content
14,236,520 members
Rate this:
Please Sign up or sign in to vote.
See more:
Can I Consume WebAPI using JQuery/AJAX, in plain HTML file?

What do I need in order to consume in plain HTML file? i.e. reference to specific jquery/ajax javascript library etc.

1) It gives me javascript error at below line.
Error: $jQuery is undefined
Line: $ = true;

Am I missing some javascript reference?

2) If I remove above line, it goes straight into error function and shows me following message.
ERROR: Could not retrieve the data\n

I tried to access my web api service in browser and it does return JSON data to me.

Below is the data I am able to receive in browser:

[{"RegionID":1,"RegionDescription":"Eastern "},{"RegionID":2,"RegionDescription":"Western "},{"RegionID":3,"RegionDescription":"Northern "},{"RegionID":4,"RegionDescription":"Southern "}]

Any help?

<!DOCTYPE html>
<html lang="en">
	<title>Web API Client (using JQuery/AJAX) for Region</title>
	<script src=""></script>
	<script src=""></script>
	<h2>Web API Client (using JQuery/AJAX) for Region</h2>
	<script type="text/javascript" >
		function GetRegion() {
			alert('inside GetRegion():');
			$ = true;
				type: "GET",
				url: "http://localhost:29604/api/Region",
				dataType: "json",
				contentType: "json",
				success: function (data) {
					// Write logic to display/process your data
				error: function (x, y, z) {
					alert('ERROR: Could not retrieve the data\n');

		function WriteResponse(Region) {        
			// Update this based on your data fields
			var strResult = "<table><th>ID</th><th>Description</th>";
			$.each(Region, function (index, Region) {
				strResult += "<tr><td>" + Region.RegionID + "</td><td> " + Region.RegionDescription + "</td></tr>";
			strResult += "</table>";

		function ShowRegion(Region) {
			if (Region != null) {
				// Update this based on your data fields
				var strResult = "<table><th>ID</th><th>Name</th><th>Description</th>";
				strResult += "<tr><td>" + Region.RegionID + "</td><td> " + Region.RegionDescription + "</td></tr>";
				strResult += "</table>";
			else {
				$("#outputData").html("No Results To Display");
					<button onclick="GetRegion();">Get Regions</button></td>
	<div id="outputData" class="scroll" style="text-align: center;"></div>

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 2


Solved by using:
$.support.cors = true; // This is required for Ajax cross domain requests.

instead of:
$ = true;

since $ is an alias for jQuery.

When I displayed the error in alert, with values x, y and z... I found the following values.
x = [object Object]
y = error
z = No Transport

Then I found the following article:[^]

I was able to call/consume Web API in plain Html file. Thanks All!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100