jquery gets the JSON format data method

Source: Internet
Author: User

Getjson Method:

Jquery.getjson (Url,data,success (DATA,STATUS,XHR))
$ ("button"). Click (function() {  $.getjson ("demo_ajax_json.js",function(Result _data) {    function(index, Name_value) {      $ ("div"). Append (Name_value + "");    });  });});

Description
URL required. Specifies which URL to send the request to.
data optional. Specifies the data that is sent to the server along with the request.
success (DATA,STATUS,XHR)

optional. Specifies the function to run when the request succeeds.

additional parameters:

  • response -contains result data from the request
  • status -contains the status of the request
  • xhr -Include XMLHttpRequest object

This function is shorthand for the Ajax function, which is equivalent to:

$.ajax ({  url:url,  data:data,  success:callback,  Datatype:json});

Example

JSON (JavaScript Object Notation) is a lightweight data interchange format. The Jsonm file contains information about "name" and "value". Sometimes we need to read JSON-formatted data files, which can be implemented using AJAX or the $.getjson () method in jquery.

The following is the use of jquery to read the JSON data format information in the Music.txt file.

First, the content in Music.txt is as follows:

    [    {"Optionkey": "1", "OptionValue": "Canon in D"},      {"Optionkey": "2", "OptionValue": " Wind Song "},      {" Optionkey ":" 3 "," OptionValue ":" Wings "}      ]  

Next is the HTML code:

<div> Click the button to get the JSON data </div><input type= "button" id= "button" value= "OK"/><div id= "result" ></ Div>

Use Ajax to get the jquery code for JSON data:

$ (document). Ready (function(){    $(' #button '). Click (function() {$.ajax ({type:"GET", URL:"Music.txt", DataType:"JSON", Success:function(data) {varMusic= "<ul>"; //I represents the index position in data, and N represents the object containing the information$.each (data,function(i,n) {//gets the value of the Optionsvalue property in the objectmusic+= "<li>" +n["OptionValue"]+ "</li>";                }); Music+ = "</ul>"; $(' #result '). append (music);        }        }); return false; });});

Of course, you can also use the $.getjson () method, the code is simple:

$ (document). Ready (function(){          $(' #button '). Click (function() {$.getjson (' Music.txt ',function(data) {varMusic= "<ul>"; $.each (data,function(i,n) {music+ = "<li>" +n["OptionValue"]+ "</li>";                  }); Music+ = "</ul>"; $(' #result '). append (music);              }); return false;      });  }); 

Example from Csdn "jquery using AJAX to get JSON format data "

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.