jquery ajax get xml data

Suggested Videos
Part 55 - jquery load callback function
Part 56 - jquery ajax get function
Part 57 - load json data using jquery ajax

(追記) (追記ここまで)

In this video we will discuss how to load XML data from the server using jQuery get function. This is continuation to Part 57, please watch Part 57 before proceeding.

(追記) (追記ここまで)

The following steps modify the example we worked with in Part 57, so that HtmlPage1.html will be able to retrieve and display XML data from the server.

Step 1 : Modify the code in GetHelpText.aspx.cs as shown below.

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Xml.Serialization;

namespace Demo
{
publicpartialclassGetHelpText : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/xml";
XmlSerializer xmlSerializer = newXmlSerializer(typeof(HelpText));
xmlSerializer.Serialize(Response.OutputStream,
GetHelpTextByKey(Request["HelpTextKey"]));
}

privateHelpText GetHelpTextByKey(string key)
{
HelpText helpText = newHelpText();

string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = newSqlConnection(cs))
{
SqlCommand cmd = newSqlCommand("spGetHelpTextByKey", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter parameter = newSqlParameter("@HelpTextKey", key);
cmd.Parameters.Add(parameter);
con.Open();
helpText.Text = cmd.ExecuteScalar().ToString();
helpText.Key = key;
}

return helpText;
}
}

publicclassHelpText
{
publicstring Key { get; set; }
publicstring Text { get; set; }
}
}

Step 2 : Modify the jQuery code in HtmlPage1.html as shown below

$(document).ready(function () {
var textBoxes = $('input[type="text"]');
textBoxes.focus(function () {
var helpDiv = $(this).attr('id');
$.get('GetHelpText.aspx', { HelpTextKey: helpDiv }, function (response) {
var jQueryXml = $(response);
var textElement = jQueryXml.find("Text");

$('#' + helpDiv + 'HelpDiv').html(textElement.text());
}, 'xml');
});

textBoxes.blur(function () {
var helpDiv = $(this).attr('id') + 'HelpDiv';
$('#' + helpDiv).html('');
});
});

 Please Note :
1. Use fiddler to inspect the data that is sent to and received from GetHelpText.aspx
2. Type the following URL in the browser to see the generated XML
http://localhost:PortNumber/GetHelpText.aspx?HelpTextKey=firstName

jQuery tutorial for beginners

1 comment:

It would be great if you can help share these free resources

[フレーム]

Subscribe to: Post Comments (Atom)

AltStyle によって変換されたページ (->オリジナル) /