Introduction:

Here we are going to explain what is ajax() method  or how to use ajax() method or why use ajax() method  or how to send request to the server and getng response without browser postback/refresh  in jQuery with example.

Description: 

The jQuery ajax() method use to send a request to the server and get the response without browser postback/refresh. ajax()method Asynchronous means that the script will send a request to the server, and continue it's execution without waiting for the reply. As soon as reply is received a browser event is fired, which in turn allows the script to execute associated function.

  • Let’s see a demonstration example of ajax() method  

ajax.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajax.aspx.cs"
Inherits="jQueryTutorials.ajax" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="bntAjaxCalculate" value="Get Calculation" /><br /><br />
    <div id="divResult"></div>   
  
    </div>
    </form>
 
     <script>
         $("#bntAjaxCalculate").click(function () {
             var num1=50
             var num2 = 50
             $.ajax({
                 url: "ajax.aspx/AddTwoNumber",
                 data: '{ num1: "' + num1+ '",num2:"' + num2 + '"}',          
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 timeout: 120000,
                 async: false,
                 dataType: "json",
                 success: function (result) {
                     $("#divResult").text(result.d);
 
                 }
 
            });
         });
    </script>
</body>
</html>


ajax.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace jQueryTutorials
{
    public partial class ajax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
        [WebMethod]
        public static string AddTwoNumber(int num1, string num2)
        {
            string Total = Convert.ToString(Convert.ToInt32(num1) + Convert.ToInt32(num2));
            Total = "Your Calculated Value :" + Total;
            return Total;
        }
    }
}

Here on click of “bntAjaxCalculate” button, ajax method will fire.

Here

  1. type: request is sent via html form “post” or “get” mechanism.
  2. url: Any valid url.
  3. data : data to send to the server.
  4. success: function to execute when the request is processed successfully, the “result.d” is the exact value that will have all the response string returned from the server.

 In above code when we click on button then form data send to the server and return calculated data which is show indivResult”.

Output:

 

     I hope it will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.