Introduction:

In this article we will explain what is load() method  or how to use load() method or why use load() method  or how to insert  data from the server to a particular element in jQuery with example.

Description: 

The Jquery load() method use to loads data from a server and puts the returned data into the selected element.

Syntax:

Here is the simple syntax to use this method.

$(selector).load(URL,data,callback);

Parameters:

Here is the description of all the parameters used by this load() method.

url − A string containing the URL to which the request is sent

data − This optional parameter represents key/value pairs that will be sent to the server.

callback − This optional parameter represents a function to be executed whenever the data is loaded successfully.

Example:

Here is the simple example of load() Method Using Asp.Net MVC

Index.cshtml: 

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Load method</title>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
    <div>
        <input type="button" id="btnLoad1" value="Load data With Callback"/>
        <input type="button" id="btnLoad" value="Load data without callback"/>
    </div>
    <div id="MyJsondata"></div> <script type="text/javascript"> 
        $("#btnLoad1").click(function () {
   //With Callback
  $("#MyJsondata").load('/Jquery/GetJsonData',{var1:1}, function (e) {
      alert(JSON.stringify(e));
   });
        });
        $("#btnLoad").click(function () {
     //without callback
   $("#MyJsondata").load('/Jquery/GetJsonData');
        }); 
    </script>
</body>
</html>

 

      JqueryController: 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Jquery.Controllers
{
    public class JqueryController : Controller    {       
        // GET: /Jquery/ 
        public ActionResult Index()        {
    return View();        }
        public JsonResult GetJsonData()        {
            Students[] obj = new Students[]  
            {                  new Students()  
                {    
                            StudentId = 1, 
                            Name = "NitinTyagi"
                            Marks = 400 
                    }, 
                    new Students()  
                    { 
                        StudentId = 2, 
                            Name = "AshishTripathi"
                            Marks = 500 
                    } 
            };
            return Json(obj, JsonRequestBehavior.AllowGet);                }    }
        public class Students        {                public int StudentId{get;set;}
        public string Name{get;set;}
                public int Marks{get;set;}             
}

 

Output: 

Use .load() method - Load web page content in jQuery

In the above code snippet, the first function “without callback” will call the JqueryController, GetJsonData Method and set the response to the “MyJsondata” div element.

Similarly, in the second function “with callback” will also call the call the JqueryController, GetJsonData Method and set the response into “MyJsondata” div element and apart from that it will also alert the response from server.

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.

You may also like