Get data using Ajax

Get data using ajax jquery
In this post I will be showing a simple method that can be used to get data from server without reloading page

Ajax (short for asynchronous JavaScript + XML) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required; JSON is often used instead , and the requests do not need to be asynchronous.
Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads. (From Wikipedia)

Syntax

 $.ajax({name:value, name:value, ... })

The Bloc code below contains  the full asp page

aspx page code (HTML) :

 <head runat="server">  
   <title></title>  
 </head>  
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>  
 <body>  
   <div>  
       <input type ="text" class="btn" id="txt_value" />  
       <input type ="button" class="btn" value="Get value" id="btntst"/>  
   </div>  
 </body>  
 </html>  
 <script>  
   $(document).ready(function () {  
     $('#btntst').click(function () {  
       $.ajax({  
         type: "POST",  
         url: "index.aspx/Getdata",  
         data: "{'ID':'" + $('#txt_value').val() + "'}",  
         dataType: "json",  
         contentType: "application/json; charset=utf-8",  
         success: function (res){  
           var json = $.parseJSON(data);  
           alert('');  
         },  
         error: function (xhr, status, error) {  
           alert(error);  
         }  
       });  
     });  
   });  
 </script>


Getdata Function

     [WebMethod]  
     [ScriptMethod]  
     public static string Getdata(int ID)  
     {  
       string SQL = "select Age from Contact where ID='" + ID + "'";  
       DataTable DATA = new DataTable();  
       SqlDataAdapter DTA = new SqlDataAdapter(SQL, cnnx);  
       DTA.Fill(DATA);  
       if (DATA.Rows.Count > 0)  
       {  
         return DATA.Rows[0].ItemArray[0].ToString();  
       }  
       return "";  
     }





Download



For more information on Ajax: wikipedia.org, w3schools.com

Khebbou