Three minutes to figure out how to use JSON

❝

“In ancient times, not only the world’s talent, but also the indomitable ambition” — Su Shi

❞

Writing in the front

JSON is mainly used for data exchange between client and server. It has no relationship with any programming language and can support any language. JavaScript language is supported natively.

JSON overview

What is the JSON

JSON, short for JavaScript Object Notation, is a lightweight data interchange format. It is based on a subset of ECMAScript and uses a completely programming language-independent text format to store and represent data. The simplicity and clarity of the hierarchy make JSON an ideal data exchange language. Easy to read and write, but also easy to machine parsing and generation, and effectively improve the efficiency of network transmission.

JSON syntax rules

The construction of JSON format is relatively simple and mainly consists of two structures:

• A collection of Name/Value pairs. In different languages, It is understood as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, it is understood as an array.

The value type in JSON format can be string, number, true, false, NULL, object, or array.

A collection of key-value pairs in JSON

A collection of name/value pairs in JSON format is an unordered collection of name/value pairs. An object begins with an open curly brace {and ends with a close curly brace}. Each name is followed by a colon:; Use commas to separate name/value pairs.

The sample structure is shown below

{

  "name1":"value1".

  "name2":"value2".

  "name3":"value3"

}

Copy the code

❝

Note that JSON strings must be wrapped in “double quotes”.

❞

An ordered list of values in JSON

An ordered list of values in JSON is an ordered collection of values. An array begins with an open bracket and ends with a close bracket. Values are separated by commas.

The sample structure is as follows:

[

  {

    "name1":"value1".

    "name2":"value2".

    "name3":"value3"

  },

  {

    "name1":"value1".

    "name2":"value2".

    "name3":"value3"

  },

  {

    "name1":"value1".

    "name2":"value2".

    "name3":"value3"

  }

]

Copy the code

JSON file

JSON has a separate file with a.json extension. This file allows you to save JSON data. The data format supports nesting.

In JavaScript JSON

JavaScript and JSON

JSON is a syntax for serializing objects, arrays, values, strings, booleans, and NULL. It’s based on JavaScript syntax, but it’s different: JavaScript isn’t JSON, and JSON isn’t JavaScript.

JSON String and JSON object

A “JSON string” is a string of data whose content format conforms to the JSON format in the JavaScript language.

The sample code looks like this:

var jsonString = }' {" name ":" obj":" obj":" obj"}'

Copy the code

“JSON object” refers to the specific representation of JSON format summarized in JavaScript language as an object or array.

The sample code looks like this:

var jsonObj = {

  "name": "White moon".

  "obj": "The strongest Red Fairy."

}

Copy the code

JSON object in JavaScript

JSON objects exist in the JavaScript language.

JSON objects contain two methods: the parse() method for parsing JSON, and the Stringify () method for converting an object/value to a JSON string. Aside from these two methods, the JSON object itself has no other function and cannot be called or invoked as a constructor.

The json.parse () method parses the JSON string and returns the corresponding value.

The syntax structure is as follows:

JSON.parse(text)

Copy the code

Parameter Description:

• text: represents the string called JavaScript to be parsed.

Json.stringify () method: Returns the JSON string corresponding to the specified value.

The syntax structure is as follows:

JSON.stringify(value)

Copy the code

Parameter Description:

• value: The value to be serialized into a JSON string.

The sample code is shown below

var jsonObj = {

  "name": "White moon".

  "obj": "The strongest Red Fairy."

}



// Convert a JSON object to a JSON string via json.stringify ()

var jsonString = JSON.stringify(jsonObj)

console.log(typeof jsonString);

console.log(jsonString);

// Convert a JSON string to a JSON object using JSON parse()

var jsonObject = JSON.parse(jsonString)

console.log(jsonObject);

console.log(typeof jsonObject);

Copy the code

The following information is displayed:

string

{"name":"白月初","obj":"最强红线仙"}

{name: 'white beginning ', obj:' strongest red line xian '}

object

Copy the code

In the Ajax JSON

Build the JSON data format

When submitting asynchronous requests to the server through Ajax, request data in JSON format is allowed. Here is the example code:

<body>

  <button id="btn">button</button>

  <script>

    var btn = document.getElementById('btn')

    btn.addEventListener('click'.function () {

      var xhrReq = new XMLHttpRequest();

      xhrReq.open('POST'.'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON');

      var obj = {

        "name": "White moon".

        "obj": "The strongest Red Fairy."

      }

      xhrReq.setRequestHeader('Content-Type'.'application/x-www-form-urlencoded')

      var jsonTest = JSON.stringify(obj)

      xhrReq.send(jsonTest);

    })

  </script>

</body>

Copy the code

Write in the last

This post introduces the JSON data format, which supports any programming language and is now a popular format for exchanging data between clients and servers.