1. Introduction to JSON
JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines. JSON uses a completely language-independent text format, but it also uses a habit similar to the C language family (including C, C ++, C #, Java, JavaScript, Perl, Python, and so on ). These features make JSON an ideal data exchange language. For more information about JSON, visit the JSON official website. We recommend that you study it carefully. In addition, the introduction of JSON in Wikipedia is also very detailed. You can visit it.
Ii. JSON encoding in PHP
It is very easy to generate a JSON string in PHP. You can directly use the json_encode () function to convert PHP data into a JSON string. The original form of this function is as follows:
String json_encode (mixed $ value)
This function can transcode any data except the resource type.
Iii. parse JSON using Javascript
There are two methods: one is to directly use the eval () function. This method is the fastest. However, because the eval method can execute arbitrary JavaScript code, security issues may occur when the data source is unreliable. For example, the following example causes page redirection:
[Html] view plaincopy
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> A section of JSON data that is redirected when eval () is used </title>
<Script type = "text/javascript" src = "../jquery-1.7.min.js"> </script>
<Script type = "text/javascript">
// Jquery obtains JSON data through AJAX
$ (Document). ready (function (){
Var dangerJson = '{message :( function () {window. location = \ 'HTTP: // blog.csdn.net/morewindows \';})()}';
// Eval (dangerJson); // redirects
Var jsonArray = JSON. parse (dangerJson); // an error is returned-invalid characters
});
</Script>
</Head>
<Body>
<H1> A section of JSON data that uses eval () to redirect the page </Body>
</Html>
The second method can prevent Insecure code from appearing-JSON supported by the browser native. the parse (str) method reads JSON data. This method uses a parser to verify whether the read code is actually JSON code, which provides better security. However, because the read speed is simulated, It is slower than eval.
Iv. JSON instance
. The program also references the Smarty, JQuery, and JSON library files.
1. json1.php
[Php] view plaincopy
<? Php
// By MoreWindows (http://blog.csdn.net/MoreWindows)
Require_once ('../smarty_libs/Smarty. class. php ');
$ Tpl_article_array = array (
"001" => array (
"Title" => "accessing MySql database using PHP ",
"Link" => "http://www.bkjia.com/kf/201112/115227.html"
),
"002" => array (
"Title" => "accessing MySql database using PHP intermediate Smarty technology ",
"Link" => "http://www.bkjia.com/kf/201112/115229.html"
),
"003" => array (
"Title" => "PHP advanced AJAX technology for MySql database access ",
"Link" => "http://www.bkjia.com/kf/201112/115230.html"
),
);
$ Tpl_article_json = json_encode ($ tpl_article_array );
$ Tpl = new Smarty ();
$ Tpl-> assign ("article_array", $ tpl_article_array );
$ Tpl-> assign ("article_json", $ tpl_article_json );
$ Tpl-> display ("json1.html ");
?>
2.json1.html
Www.2cto.com
[Html] view plaincopy
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Use json </title>
<Script type = "text/javascript" src = "../jquery-1.7.min.js"> </script>
<Script type = "text/javascript" src = "json2.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var g_jsonstr = JSON. parse ('{$ article_json}'); // parse the JSON string through JSON. parse ()
$ ("Div"). mouseenter (function () {// mouseenter mouseover
Var thisId = $ (this). attr ("id ");
Var jsonid = thisId. substring (thisId. lastIndexOf ("_") + 1, thisId. length );
$ ("# Article_link" ).css ("position", "absolute ");
$ ("# Article_link" ).css ("left", "20px ");
$ ("# Article_link" ).css ("top", $ (this). offset (). top + $ (this). height ());
$ ("# Article_link" ).html ("link address" + g_jsonstr [jsonid] ['link']);
$ ("# Article_link"). slideDown ("fast ");
Certificate (this).css ("background-color", "red ");
});
$ ("Div"). mouseleave (function () {// mouseleave mouseout
$ ("# Article_link"). hide ();
((This).css ("background-color", "yellow ");
});
});
</Script>
<Style type = "text/css">
Div
{
Font-family: sans-serif;
}
</Style>
</Head>
<Body>
{Foreach $ article_array as $ key => $ value}
<Div id = "div _ {$ key}">
<H1 >{$ value ['title']} </Div>
{/Foreach}
<P> <span id = "article_link" style = "display: none; z-index: 100"> </span> </p>
</Body>
</Html>
The running result is as follows (Win7 + IE9.0 ):
When the mouse goes through three headers, The mouseenter event is triggered to display the prompt statement.
The next article "JSON advanced Article 2 transmitting JSON Data Using AJAX" describes how to use AJAX dynamic requests to obtain JSON data and generate titles and prompt statements.
Reprinted please indicate the source, original address: http://blog.csdn.net/morewindows/article/details/7197971
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
