• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

JSON Data in JQuery

Getting JSON data

There would be a situation when sever would return JSON string against your request. JQuery utility function getJSON() pases the returned JSON string and makes the resulting string available to the call back function as first parameter to take further action.

 

Syntax

Here is the simple syntax for get.JSON() method:

{selector}.getJSON{ URL,  {data}, {callback} };

 

Here is the description of all the parameters:

URL

The URL of there sever-side resource contacted via the GET method.

Data

An object whose properties sever as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.

Call-back

A function invoked when the request completers. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this call-back and the status as the second.

 

Example

Consider the following HTML file with a small JQuery coding

 

<html>

<head>

<title>the title </title>

<script type=”text/javascript”

Src=”/jquery/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” language =”javascript”>

${document}.ready{function}{}{

${“#driver”}.click{function{event}{

$.gerJSON{“/jquery/result.json”,function{jd} {

${“#stage’}.html{‘<p> Name:’+jd.name: ‘+’</p>’};

${“#stage’}.append{‘<p> Age:’+jd.age+ ’</p>’};

${“#stage’}.append{‘<p> Sex:’ +jd.sex +’</p>’};

}};

</script>

</head>

<body>

<p> Click on the button to load result.html file:</p>

<div id=”stage” style=”background-color:blue;”>

STAGE

</div>

<input type=”button” id=”driver” value=”Load Data”/>

<body>

</html>

Here JQuery utility method gerJSON() intiates an Ajax request to the specified URL/jquery/result.json.file.

After loading this file, all the content would be passed to the call-back function which finally would be populated inside<div>tagged with ID stage. ASssuming,oru/jquery/result.josn file has following json formatted content:

 

{

“name”: “Zara Ali”,

“age”: “67”,

“sex”: “female”

}

When you click the given button ,then result.json file gets loaded.

 

Passing data to the Server

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.

 

Example

This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it:

html>

<head>

<title>the title </title>

<script type=”text/javascript”

Src=”/jquery/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” language =”javascript”>

${document}.ready{function}{}{

${“#driver”}.click{function{event}{

Var.name =$ (‘#name”}.val{};

${“#stage’}.load{‘/jquery/result.php’,{“name”:name} };

}};

</script>

</head>

<body>

<p> Enter your name and click on the button:,/p>

<input type=”input “ id=”name” sixe=”40”/><br/>

<div ie=”stage” style =”background-color”blue;”>

 

STAGE

</div>

</input type=”button” id=”driver” value=”Show Result”/>

<body>

</html>

Here is the code written in result.php script:

<?php

If { $_REQUEST{“name”} }

{

$name=$ _ REQUEST{‘name’ };

Echo “Welcome”.$ name;

 

}

?>

Now you can enter nay text in the given input box and then click ”Show Result” button to see what you have entered in the input box.

Summary
Review Date
Reviewed Item
JSON Data in JQuery
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on JSON Data in JQuery"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.