Introduction:

Here we are going to explain what is getJSON() method  or how to use getJSON() method or why use getJSON() method  or how to get Json data from the server without browser postback/refresh  in jQuery with example.

Description: 

The jQuery.getJSON() method use to loads JSON data from the server using a GET HTTP request. 

Syntax:

Here is the simple syntax to use this method.

$.getJSON( url, [data], [callback] )
  • Parameters:

Here is the description of all the parameters used by this getJSON() 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 getJSON() Using Asp.Net MVC
  •     Index.cshtml:

 

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
     <div>
     <input type="button" id="btnJson" value="Load Json data" />
    </div>        <div id="MyJsondata"></div> 
     <script type="text/javascript"> 
         $("#btnJson").click(function () {
    $.getJSON('/Jquery/GetJsonData', function (data) {                 
    $('#MyJsondata').html(JSON.stringify(data));
    });           
         });
              </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 getJSON() method - Load JSON data from server in jQuery

  •  In above code when we click on button then Get Json data from the server .which is show in “MyJsondata'”.
  •  
  •  
  •  

comments


Leave a comment

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

You may also like