How to make AJAX request using jQuery?

How to make AJAX request using jQuery?

Example : https://drive.google.com/file/d/1Ed49rtebyOtRC6sDW4PKscqpvMYRuR3W/view?usp=sharing

jQuery provides you built in method to make AJAX request to sever and retrieve result.

What is AJAX in jQuery?

AJAX is called Asynchronous Java Script with XML , it enables us to make the sync request to the server and retrieve the result from the server to load it in UI without refreshing or reloading the page.

To implement the ajax using ajax() method using following syntax –

$.ajax({
url:“url”,
type:“get/post/put/delete”,
contentType:“application/json/xml”,
success:function(result) {},
error:function(err){}
})

url:- this parameter allow you to specify the url of a program to which you want to make the request.
type:- this parameter allow you to specify the method used to make the request like get, post, delete, put.
contentType:- allow you to specify the type of content you are expecting from the server.
success:- allow you to specify the function/method that will be executed when the ajax call is successful. This method also get the result of call in variable or parameter.
error: – allow you to specify the function/method that will be executed when their is error and error information will be received the error parameter.

jQuery AJAx Method Example.

Let us implement it step by step –

Step1: Create Empty ASP.NET Core Project.

Step 2: Activate the MVC and End Point Routing

public void ConfigureServices(IServiceCollection services)        {
            services.AddControllersWithViews();
        }
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)   {
            if (env.IsDevelopment())            {
                app.UseDeveloperExceptionPage();
            }
            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>         {
                endpoints.MapDefaultControllerRoute();
            });
        }

Step 3: Create Home Controller and Index Action with Index View.

public class HomeController : Controller
 {
        public IActionResult Index()
        {
            return View();
        }
 }

Step 4: Install jQuery to install jQuery refer previous article (install it using libman)

Step 5: Create Models Folder and Create Customer Model as follows.

namespace JQueryAJAXEx.Models
{
    public class Customer
    {
        public Int64 CustomerID { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string EmailID { get; set; }
        public string MobileNo { get; set; }
        public decimal CreditLimit { get; set; }

        public static List<Customer> GetCustomers()
        {
            List<Customer> lst = new List<Customer>();
            lst.Add(new Customer() {CustomerID=121,CustomerName="Ganesh",Address="Nigdi Pune",EmailID="Ganesh@gmail.com",CreditLimit=45000,MobileNo="8989898"});
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 121, CustomerName = "Ganesh", Address = "Nigdi Pune", EmailID = "Ganesh@gmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });

            lst.Add(new Customer() { CustomerID = 121, CustomerName = "Ganesh", Address = "Nigdi Pune", EmailID = "Ganesh@gmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 121, CustomerName = "Ganesh", Address = "Nigdi Pune", EmailID = "Ganesh@gmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 121, CustomerName = "Ganesh", Address = "Nigdi Pune", EmailID = "Ganesh@gmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 121, CustomerName = "Ganesh", Address = "Nigdi Pune", EmailID = "Ganesh@gmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 121, CustomerName = "Ganesh", Address = "Nigdi Pune", EmailID = "Ganesh@gmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            lst.Add(new Customer() { CustomerID = 122, CustomerName = "Suresh", Address = "Nigdi Pune", EmailID = "suresh@gmail.com", CreditLimit = 55000, MobileNo = "78989898" });
            lst.Add(new Customer() { CustomerID = 123, CustomerName = "Sudhir", Address = "Mumbai", EmailID = "sudhir@gmail.com", CreditLimit = 65000, MobileNo = "777989898" });
            lst.Add(new Customer() { CustomerID = 124, CustomerName = "Anil", Address = "Delhi", EmailID = "Anil@gmail.com", CreditLimit = 75000, MobileNo = "8977789898" });
            lst.Add(new Customer() { CustomerID = 125, CustomerName = "Amol", Address = "Nigdi Pune", EmailID = "Amol@hotmail.com", CreditLimit = 45000, MobileNo = "8989898" });
            return lst;
        }
    }
}

Step 6: Create GetCustomers() method which will return you a customer data in the form in JSON.

public JsonResult GetCustomers()
  {
            List<Customer> lst = Customer.GetCustomers();
            return Json(lst);
  }

Step 7: Invoke this action from Index View using Ajax Method as follows –

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="~/js/jquery/jquery.js" > </script>
    <script type="text/javascript">
        $(function () { 

            $("#btn").click(function () {

                $.ajax({
                    url: "/home/getcustomers",
                    type: "Get",
                    contentType: "application/json",
                    success: function (result) {
                    //    alert(JSON.stringify(result)); 
                        var str = "";
                        $("#tb").empty();
                        for (var i = 0; i < result.length; i++) {
                            str = "<tr><td>" + result[i].customerID + "</td>";
                            str += "<td>" + result[i].customerName + "</td>";
                            str += "<td>" + result[i].address + "</td>";
                            str += "<td>" + result[i].emailID + "</td>";
                            str += "<td>" + result[i].mobileNo + "</td>";
                            str += "<td>" + result[i].creditLimit + "</td></tr>";
                            $("#tb").append(str);
                        }

                    },
                    error: function (err) {
                        alert("Error:"+ err.statusText);
                    }
                });

            });
        });
    </script>
</head>
<body>
     <input type="button" value="load" id="btn" />
      <table border="1">
          <tr>
              <td>
                  Customer ID
              </td>
              <td>
                 Customer Name
              </td>
              <td>
                  Address
              </td>
              <td>
                 Email ID
              </td>
              <td>
                  Mobile No
              </td>
              <td>
                 Credit Limit
              </td>
          </tr>
          <tbody id="tb">

          </tbody>
      </table>
</body>
</html>

This way we can use jquery ajax to make a sync request to server and retrieve the result from the server.