Friday, November 2, 2012

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)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Ajax Get</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <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>
    <form id="frmAjax" runat="server">
    <table border="1">
        <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>
                <div id="divGETRequest"></div> 
            </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; }
        }
    }
}

Search Flipkart Products:
Flipkart.com

No comments: