ASP.NET Podcast Show #128 - AJAX with jQuery
Original Url:
http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2008/12/03/asp-net-podcast-show-128-ajax-with-jquery.aspx
Show Notes:
- AJAX with jQuery.
- Download the intellisense vsdoc file
-
Visual Studio 2008 SP1 hotfix.
Source Code:
jQuery Version:
<!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
runat="server">
<title>jQuery Example</title>
</head>
<body>
<form
id="form1"
runat="server">
<!--
<script language="javascript" type="text/javascript"
src="jquery-1.2.6-vsdoc.js"></script>
-->
<script
language="javascript"
type="text/javascript"
src="jquery.pack.js"></script>
<div>
<label
for="lblOutput">
Text Out:
</label>
<div
id="lblOutput"
/>
<script
language="javascript"
type="text/javascript">
$(document).ready(function() {
$.ajax({
type:
"POST",
contentType:
"application/json; charset=utf-8",
url:
"GetData.asmx/ReturnData",
data:
"{i: 47}",
dataType:
"json",
success:
function(msg) {
onSuccess(msg); },
error:
function() {
alert("An error occurred on the server.");
}
});
});
function onSuccess(msg)
{
var newline =
"<br />";
$('#lblOutput').html("Name: "
+ msg.d.Name + newline +
"Notes: " +
msg.d.Notes + newline +
"Passed Value: "
+ msg.d.PassedValue);
}
</script>
</div>
</form>
</body>
</html>
<!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
runat="server">
<title></title>
<script
type="text/javascript">
function pageLoad() {
GetData.ReturnData(47, onSuccess);
}
function
onSuccess(result) {
var newline =
"<br />";
$get('lblOutput').innerHTML =
"Name: " +
result.Name +
newline +
"Notes: " +
result.Notes + newline +
"Passed Value: "
+ result.PassedValue;
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<label
for="lblOutput">
Text Out:
</label>
<div
id="lblOutput"
/>
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
<Services>
<asp:ServiceReference
Path="~/jQuery/GetData.asmx"
/>
</Services>
</asp:ScriptManager>
</div>
</form>
</body>