Thursday, November 8, 2012

jQuery HTTP POST Request Example

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

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

$.post("<Server URL>",<POST parameters>, successHandlerFunction(…));

The following example sends a HTTP POST request to the server using the post() 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 Post</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
            $('#btnHttpPOSTRequest').click(function(event) {
                event.preventDefault();
                $.post("AjaxData.aspx", { ID: "1" }, function(result) {
                    $("#divPOSTRequest").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="btnHttpPOSTRequest"
                    runat="server"
                    Text="HTTP POST Request" />
            </td>
            <td>
                <div id="divPOSTRequest"></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));
            }
        }
        //
        private List<clsContacts> getContactList()
        {
            List<clsContacts> lstContacts = new List<clsContacts>();
            lstContacts.Add(new clsContacts("1","John", "34"));
            lstContacts.Add(new clsContacts("2", "David", "24"));
            return 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 buildXML(List<clsContacts> lstContacts)
        {
            XElement contactsXML = new XElement("Contacts");
            //
            foreach (clsContacts objContact in lstContacts)
            {
                contactsXML.Add(
                    new XElement("Contact",
                        new XElement("Name", objContact.Name),
                        new XElement("Age", objContact.Age)
                    )
                );
            }
            return contactsXML.ToString();
        }
        //
        private string buildHTML(List<clsContacts> lstContacts)
        {
            string strHTML = ""
;
            strHTML += "
Name
Age
";
            XElement contactsXML = new XElement("Contacts");
            //
            foreach (clsContacts objContact in lstContacts)
            {
                strHTML += "
"
+ objContact.Name + "


" + objContact.Age + "";
            }
            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: