Thursday, November 8, 2012

jQuery Post HTML Response Example

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

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

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

The following example receives a HTML format data from the server and displays the data 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 Load</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script
        type="text/javascript"
        language="javascript">
        $(document).ready(function() {
            // Get HTML Response data from the Server
            $('#btnGetHTML').click(function(event) {
                event.preventDefault();
                $.post("AjaxData.aspx", { ID: "1" }, function(result) {
                    $("#divHTML").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 valign="middle">
                <td>
                    <asp:Button
                        ID="btnGetHTML"
                        runat="server"
                        Text="Get HTML" />
                </td>
                <td align="center">
                    <br /><div id="divHTML"></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

6 comments:

RS Gold said...


this is just also great regarding words! :)
best wishes! diablo 3 Gold



Runescape Gold

Unknown said...

Fast delivery + 15% Discount can be assured if you buy buy runescape gold pay by Western Union on Rsorder!

Details at: http://www.rsorder.com/profile/news/read/id/448

Free 200M runescape gold Giveaway on RSorder Flash Sale!

Time: 03:00 AM on December 21, 2012 GMT

To know more: http://www.rsorder.com/profile/news/read/id/441

nongfu380 said...

I like read, this is a good
cheap phones for sale article

ibaikallw3 said...

Thanks for sharing with us how you did your research.cheap phones for sale I always find it fascinating.

ibaikallw3 said...

Thank you greatly with regard to revealing this valuable data.cheapest phones I might definitely similar to.

Unknown said...

Smiling to the world! This is great and excellent! Sometimes we may be sad toward the world, but smile is always a good friend in our side and keep our Sony case from away the terrible world~