JSON 上級パート 1: PHP および JavaScript での JSON_PHP チュートリアルの使用-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

JSON 上級パート 1: PHP および JavaScript での JSON_PHP チュートリアルの使用

Jul 13, 2016 pm 05:48 PM

javascript json php 1つそして使用存在する導入高度な

1つ。 JSON の紹介
JSON (JavaScript Object Notation) は軽量のデータ交換形式です。人間にとって読み書きしやすい。機械による解析と生成も簡単です。 JSON は完全に言語に依存しないテキスト形式を使用しますが、C 言語ファミリー (C、C++、C#、Java、JavaScript、Perl、Python など) に似た規則も使用します。これらの特性により、JSON は理想的なデータ交換言語になります。 JSON の詳細な説明については、JSON の公式 Web サイトを参照してください。この Web サイトには写真と事実が掲載されています。よく読んでください。また、Wikipedia の JSON の紹介も非常に詳しく解説されていますので、ぜひご覧ください。

二。 PHP での JSON エンコード
PHP で JSON 文字列を生成するのは非常に簡単です。json_encode() 関数を直接使用して、PHP データを JSON 文字列に変換できます。この関数のプロトタイプは次のとおりです。
文字列 json_encode (混合 $value)

この関数は、リソースタイプを除くあらゆるデータをトランスコードできます。

三つ。 JSON を解析する Javascript
方法は 2 つあります。1 つは eval() 関数を直接使用する方法です。この方法が最も高速です。ただし、eval メソッドは任意の JavaScript コードを実行することもできるため、データソースが信頼できない場合にはセキュリティの問題が発生する可能性があります。たとえば、次の例ではページがリダイレクトされます:

[html] 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">
<title>eval() を使用して解釈される JSON データにより、ページがリダイレクトされます</title> <script type="text/javascript" src="../jquery-1.7.min.js"></script> <スクリプトタイプ="text/javascript"> //jquery は AJAX を通じて JSON データを取得します
$(document).ready(function(){
var危険Json = '{message:(function(){window.location='http://blog.csdn.net/morewindows';})()}'; //eval(dangerJson) //リダイレクトします
var jsonArray = JSON.parse(dangerJson) //エラーが報告されます - 無効な文字
}); </スクリプト> </頭>
<h1>eval() を使用して解釈される JSON データの一部により、ページがリダイレクトされます</h1> </本文> </html> 2 番目の方法では、安全でないコードの発生を防ぐことができます。ブラウザーでネイティブにサポートされている JSON.parse(str) メソッドを通じて JSON データを読み取ります。この方法では、パーサーを使用して、読み取られたコードが本当に JSON コードであるかどうかを確認するため、セキュリティが向上します。ただし、擬似的に読み込むため、eval()より遅くなります。

四。 JSON の例
以下では、例を使用して、データが JSON 文字列にエンコードされる方法と、JSON 文字列が JavaScript でどのように解析されて使用されるかを説明します。プログラムは json1.php と json1.html に分かれています。プログラムは、Smarty、JQuery、および JSON ライブラリファイルを参照する必要もあります。

1. json1.php

[php] plaincopy を表示
<?php
// 投稿者 MoreWindows( http://blog.csdn.net/MoreWindows )
require_once ('../../smarty_libs/Smarty.class.php'); $tpl_article_array = array(
"001" => 配列(
; "title"=>"PHP を使用して MySql データベースにアクセスする - 初級",
"リンク"=>"http://www.BkJia.com/kf/201112/115227.html"
)、
"002" => 配列(
; "title"=>"PHP が MySql データベースにアクセスする中級 Smarty テクノロジー",
"リンク"=>"http://www.BkJia.com/kf/201112/115229.html"
)、
"003" => 配列(
; "title"=>"PHP Access MySql データベース高度な AJAX テクノロジ",
"リンク"=>"http://www.BkJia.com/kf/201112/115230.html"
)、
);
$tpl_article_json = json_encode($tpl_article_array); $tpl = 新しい 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] 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">

<title>json を使用</title>
<script type="text/javascript" src="../jquery-1.7.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
    var g_jsonstr = JSON.parse('{$article_json}');//通过JSON.parse()JSON文字列を解析
    $("div").mouseenter(function(){ //マウスエンターマウスオーバー
        var thisId = $(this).attr("id");
        var jsonid = thisId.substring(thisId.lastIndexOf("_") + 1, thisId.length);

        $("#article_link").css("位置","絶対");
        $("#article_link").css("left","20px");
        $("#article_link").css("top",$(this).offset().top + $(this).height());

        $("#article_link").html("链接地址" + g_jsonstr[jsonid]['link']);
        $("#article_link").slideDown("高速");
        $(this).css("背景色","赤");
    });
    $("div").mouseleave(function(){ //mouseleave マウスアウト
        $("#article_link").hide();
        $(this).css("背景色","黄色");
    });
});
</スクリプト>
<style type="text/css">
ディビジョン
{
    フォントファミリー:サンセリフ;
}
</スタイル>
</head>

{foreach $article_array as $key=>$value}
    <div id="div_{$key}">
        <h1>{$value['title']}</h1>
    </div>
{/foreach}
<p><span id="article_link" style="display:none;z-index:100"></span></p>
</ボディ>
</html>
実行結果下記（Win7+IE9.0）：

ネズミが 3 つのマークを通過すると、マウス入力イベントが提案句を表示します。
次のセクション《JSON への第 2 セクション AJAX 方式による JSON データの転送》では、AJAX アクティビティを使用して JSON データを取得し、メッセージおよび提案句を生成する方法を説明します。

转下请标明出处，翻訳地址：http://blog.csdn.net/morewindows/article/details/7197971