JQuery easyUI framework (1)-Json value passing, jqueryeasyui

JQuery easyUI framework (1)-Json value passing, jqueryeasyui

JQueryEasyUI is a collection of jQuery-based UI plug-ins. The goal of jQueryEasyUI is to help web developers easily create a rich and beautiful UI interface. Developers do not need to write complex javascript or have a deep understanding of css styles. Developers only need to know some simple html tags.

EasyUI generally interacts with the background through a Json string. The following describes how to use Json.

 

I. JSON

JSON: JavaScript ObjectNotation, a syntax used to store and exchange text information.

 

Similar to XML

JSON is plain text

JSON has a hierarchical structure (Values exist in values)

JSON can be parsed using JavaScript

JSON data can be transmitted using AJAX

Differences

Simple format

Faster read/write speed

Ability to parse using the built-in JavaScript eval () method

 JSON is smaller, faster, and easier to parse than XML. It is inconvenient to process XML in JS, and json can be processed as an object in JS.

 

Ii. json format

Data is stored inName/valueCenter

Data fromCommaSeparate

Curly bracketsSave object

Square bracketsSave an array

Two representation structures: objects and Arrays

1. Object

The object structure stores data with {}. The middle part is composed of 0 or multiple "," separated "key (keyword)/value (value)" pairs, keywords and values are separated. Instance:

{

Name: Xiao,

Age: 23,

...

}

Keywords are strings, while values can be strings, values, true, false, null, objects, or arrays.

2. Array

The array structure saves data in. Separated by commas (,), instances

[

{

Age: 12,

Sex: Female

},

{

Age: 13,

Sex: Male

}

]

3. JSON strings and JSON objects

JSON string: Indicates the js string that meets the json format requirements.

Var str1 = "{" name ":" cxh "," sex ":" man "}";

JSON object: Js object that meets the json format requirements.

Var str2 = {"name": "cxh", "sex": "man "};

4. Reading and Writing JSON in JS

JSON is a subset of JS. Two methods are available for reading and writing JSON, namely using the "." operator and "[key]" method.

For example: var obj = {"name": "cxh", "sex": "man "};

Obj. sex

Obj. ["sex"]

5. Use JSON

 1. Convert the object into a JSON string

(1) convert. net objects to JSON strings through serialization

The data we query from the database (generally a collection, list or array) is converted into a JSON string and sent back to the client. We need to convert the common string to the Json format, the SerializeObject method of the JsonConvert object is used here.

(2) Use LINQ to JSON to customize JSON data

SerializeObject simply converts a list or set to a json string. If you have certain requirements on the data format, you need to use LINQto JSON of JSON. NET. The function of LINQ to JSON is to customize json data according to the required format.

I also introduced

Use toJSONString () or the global method JSON. stringify () to convert the JSON object to a JSON string from the json. js package.

2. Convert Json strings into json objects

(1) Use the eval () function var obj = eval ('+ str + ')');

(2) Use the parse method var obj = JSON. parse (str );

The server uses the SerializeObject method of the JsonConvert object to convert the json string from A. net object, and uses LINQto json to customize the output JSON string. To convert a json string to A. net object, the DeserializeObject method of the JsonConvert object is preferred. You can also use LINQ toJSON.

Vi. eval () Functions and json parser

The eval () function uses a JavaScript compiler that parses JSON text and generates JavaScript objects. Text must be enclosed in parentheses to avoid syntax errors:

It is safer to use the JSON parser to convert JSON into JavaScript objects. The JSON parser can only recognize JSON text, rather than compile scripts. In the browser, this provides native JSON support, and the JSON parser is faster.

VII. easyUI + Json value passing instance

EasyUI information to be referenced

<Span style = "font-family: KaiTi_GB2312;"> <span style = "font-size: 18px; "> 




EasyUI Control
<Span style = "font-family: KaiTi_GB2312;"> <span style = "font-size: 18px;"> <! -- Table display area --> <body> 




Create An aspx file and write the Json string:
<Span style = "font-family: KaiTi_GB2312;"> <span style = "font-size: 18px;"> {"total": 3, "rows ": [{"firstname": "Michael", "age": "23", "phone": "18736669861", "email": "gxq74171234@163.com" },{ "firstname ": "small", "age": "33", "phone": "18736669861", "email": "gxq74171234@163.com" },{ "firstname": "Silver ", "age": "22", "phone": "18736669861", "email": "gxq74171234@163.com"}]} </span>




When we use a Json string, the format is concatenated from a common string into a Json string, and escape characters are required"\""Corresponding", Such
StringstrJson = "{\" total \ ": 5, \" rows \ ": [{\" firstname \ ": \" \ ", \" age \": \ "22 \", \ "phone \": \ "18730666152 \", \ "email \": \ "741@qq.com \"}]} ";


There are still many details about JqueryeasyUI, which will be summarized and learned later.