C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

jQuery HTTP GET Request Example

The jQuery Get() ajax method supports HTTP GET requests. In this post we shall see on how to send a HTTP GET request to the server.

The syntax for sending a HTTP GET request using the Get() method is as follows.

$.get("<Server URL with Parameters >", successHandlerFunction(…));

The following example sends a HTTP GET request to the server using the Get() method and displays the data returned by the server in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Get</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Send HTTP Get Request

$('#btnHttpGETRequest').click(function(event) {

event.preventDefault();

$.get("AjaxData.aspx?ID=1", function(result) {

$("#divGETRequest").html(result);

}

);

});
});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<tr>

<td>

<asp:Button

ID="btnHttpGETRequest"

runat="server"

Text="HTTP GET Request" />

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

AjaxData.aspx.cs (Server Side)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml.Linq;

namespace jQuery

{

public partial class AjaxData : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if ((Request.Form != null)&&(Request.Form.Count > 0))

{

// Process HTTP POST Request

string strFilterID = Request.Form["ID"].ToString();

List<clsContacts> lstContacts = getContactByID(strFilterID);

Response.Write(buildHTML(lstContacts));

}

else

{

if (Request.QueryString["ID"] != null)

{

// Process HTTP GET Request

string strFilterID = Request.QueryString["ID"].ToString();

List<clsContacts> lstContacts = getContactByID(strFilterID);

Response.Write(buildHTML(lstContacts));

}

private List<clsContacts> getContactByID(string filterKey)

{

List<clsContacts> lstContacts = new List<clsContacts>();

lstContacts.Add(new clsContacts("1", "John", "34"));

lstContacts.Add(new clsContacts("2", "David", "24"));

var filteredContacts = from c in lstContacts

where c.ID.Equals(filterKey)

select c;

return filteredContacts.ToList();

}

private string buildHTML(List<clsContacts> lstContacts)

{

string strHTML = "<table border='1'>";

strHTML += "<tr><td><b>Name</b></td><td><b>Age</b></td></tr>";

XElement contactsXML = new XElement("Contacts");

foreach (clsContacts objContact in lstContacts)

{

strHTML += "<tr><td>" + objContact.Name + "</td><td>" + objContact.Age + "</td></tr>";

}

return strHTML;

}

public class clsContacts

{

public string _id;

public string _name;

public string _age;

public clsContacts(string strID, string strname, string strAge)

{

this._id = strID;

this._name = strname;

this._age = strAge;

}

public string ID

{

get { return _id; }

set { _id = value; }

}

public string Name

{

get { return _name; }

set { _name = value; }

}

public string Age

{

get { return _age; }

set { _age = value; }

}

jQuery Get JSON Response Example

The jQuery Get() ajax method supports HTML, XML, JSON and Text type responses sent by the server. In this post we shall see on how to process JSON data returned from the server using the jQuery Get() method.

The syntax for receiving and processing JSON response is as follows.

$.get("<Server URL>", successHandlerFunction(…));

The following example receives a JSON format data from the server and displays the data in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Load</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get JSON Response data from the Server

$('#btnGetJSON').click(function(event) {

event.preventDefault();

var jsonContent = "";

var jsonObj;

$.get("AjaxData.json", function(result) {

jsonObj = jQuery.parseJSON(result);

for (var x = 0; x < jsonObj.length; x++) {

jsonContent += jsonObj[x].Name;

jsonContent += "-";

jsonContent += jsonObj[x].Age;

jsonContent += "<br>";

}

$("#divJSON").html(jsonContent);

}

);

});
});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnGetJSON"

runat="server"

Text="Get JSON" />

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

.AjaxData.json(Server Side)

[{"Name": "John", "Age": "34"}, {"Name": "David", "Age":"24"}]

Related Post
jQuery Get Method
jQuery Get HTML Response Example
jQuery Get XML Response Example
jQuery Get Text Response Example
jQuery Get JSON Response Example
jQuery HTTP GET Request Example

jQuery Get XML Response Example

The jQuery Get() ajax method supports HTML, XML, JSON and Text type responses sent by the server. In this post we shall see on how to process XML data returned from the server using the jQuery Get() method.

The syntax for receiving and processing XML response is as follows.

$.get("<Server URL>", successHandlerFunction(…));

The following example receives a XML format data from the server and displays the data in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Load</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get XML Response data from the Server

$('#btnGetXML').click(function(event) {

event.preventDefault();

var nameList = "";

$.get("AjaxData.xml", function(result) {

$(result).find("Name").each(function() {

nameList = nameList + $(this).text() + "<br />";

});

$("#divXML").html(nameList);

}

);

});
});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnGetXML"

runat="server"

Text="Get XML" />

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

.AjaxData.xml (Server Side)

<?xml version="1.0" encoding="utf-8" ?>

<Address>125. E.Spring Creeks, OH</Address>

</Contact>

<Name>David</Name>

<Address>121 Highway, Plano TX</Address>

</Contact>

</Contacts>