ajaxでJsonデータを読み取る方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ajaxでJsonデータを読み取る方法

php中世界最好的语言

Apr 04, 2018 pm 04:03 PM

ajax javascript json

今回は、ajaxでJsonデータを読み取る方法について説明します。ajaxを使用してJsonデータを読み取るときの注意事項は何ですか?実際のケースを見てみましょう。

この記事では、ajax を使用して Json のデータを読み取る方法を共有します。

1.基礎知識

jsonとは？

JSON は

JavaScript Object Notation (JavaScript Object Notation) を指します JSON は軽量のテキストデータ交換形式です
JSON は言語に依存しません*
JSON は自己記述的で理解しやすいです
JSON は JavaScript 構文を使用してデータを記述しますオブジェクトですが、JSON は言語とプラットフォームに依存しません。 JSON パーサーと JSON ライブラリは、さまざまな
プログラミング言語をサポートしています。
JSON - JavaScript オブジェクトへの変換

JSON テキスト形式は、JavaScript オブジェクトを作成するコードと構文的に同一です。

この類似性により、JavaScript プログラムは組み込みの eval() 関数を使用して、パーサーを必要とせずに JSON データからネイティブ JavaScript オブジェクトを生成できます。

2. Jsonでデータを読み込みます

まず、コンテンツを含むJsonファイルを作成しました。形式に注意してください。

図1 jsonファイルを書く

次に、htmlコードを記述し、ajaxを参照します。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用AJAX异步读取json</title>
<script src="ajax.js">
</script>
<script>
  window.onload=function()
  {
    /*获得按钮*/
    var aBtn=document.getElementById('btn1');
    //给按钮添加点击事件
    aBtn.onclick=function()
    {
      //调用ajax函数
      ajax('data.json',function(str){
        //将JSON 数据来生成原生的 JavaScript 对象
        var arr=eval(str);
        alert(arr[0].b);
    });
    };
  };
</script>
</head>
<body>
读取json里面的数据 <br />
<input id="btn1" type="button" value="读取json里面的数据" />
</body>
</html>

ログイン後にコピー

カプセル化された AJAX 関数のコードは次のとおりです:

/*
AJAX封装函数
url：系统要读取文件的地址
fnSucc：一个函数，文件取过来，加载完会调用
*/
function ajax(url, fnSucc, fnFaild)
{
  //1.创建Ajax对象
  var oAjax=null;
  if(window.XMLHttpRequest)
  {
    oAjax=new XMLHttpRequest();
  }
  else
  {
    oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2.连接服务器
  oAjax.open('GET', url, true);
  //3.发送请求
  oAjax.send();
  //4.接收服务器的返回
  oAjax.onreadystatechange=function ()
  {
    if(oAjax.readyState==4) //完成
    {
      if(oAjax.status==200)  //成功
      {
        fnSucc(oAjax.responseText);
      }
      else
      {
        if(fnFaild)
          fnFaild(oAjax.status);
      }
    }
  };
}

ログイン後にコピー

次のステップは、ファイルの内容を読み取ることです。その前に、AJAX はサーバーからファイルを読み取るため、記述された JSON は次のとおりである必要があります。おそらく初心者が接触する唯一のサーバーは C:inetpubwwwrootaspnet_clientsystem_web です。このパスに Json を配置し、localhost を使用してサーバーにアクセスします。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ajaxを実装する3つの方法

jQuery+AJAXはページの背景を呼び出します

以上がajaxでJsonデータを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1666

CakePHP チュートリアル

1425

Laravel チュートリアル

1325

PHP チュートリアル

1273

C# チュートリアル

1252

Related knowledge

PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアントスクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタムロジック

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプルコードです。

PHPを深く理解する：JSON Unicodeを中国語に変換する実装方法 Mar 05, 2024 pm 02:48 PM

PHP の深い理解: JSONUnicode を中国語に変換する実装方法開発中、JSON データを処理する必要がある状況によく遭遇しますが、特に変換する必要がある場合、JSON 内の Unicode エンコードによっていくつかのシナリオで問題が発生します。 Unicode エンコードを漢字に変換する場合。 PHP では、この変換処理を実現するためのメソッドがいくつかありますが、以下では一般的なメソッドを紹介し、具体的なコード例を示します。まず、JSON の Un について理解しましょう

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページコンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

PHP 関数を使用して JSON データを処理するにはどうすればよいですか? May 04, 2024 pm 03:21 PM

PHP には、JSON データを処理する次の関数が用意されています。 JSON データの解析: json_decode() を使用して、JSON 文字列を PHP 配列に変換します。 JSON データを作成する: json_encode() を使用して、PHP 配列またはオブジェクトを JSON 文字列に変換します。 JSON データの特定の値を取得する: PHP 配列関数を使用して、キーと値のペアや配列要素などの特定の値にアクセスします。

PHP と Ajax: Ajax のセキュリティを向上させる方法 Jun 01, 2024 am 09:34 AM

Ajax セキュリティを向上させるには、いくつかの方法があります。 CSRF 保護: トークンを生成してクライアントに送信し、それを検証リクエストのサーバー側に追加します。 XSS 保護: htmlspecialchars() を使用して入力をフィルタリングし、悪意のあるスクリプトの挿入を防ぎます。 Content-Security-Policy ヘッダー: 悪意のあるリソースの読み込みを制限し、スクリプトとスタイルシートの読み込みを許可するソースを指定します。サーバー側の入力を検証する: Ajax リクエストから受け取った入力を検証して、攻撃者による入力の脆弱性の悪用を防ぎます。安全な Ajax ライブラリを使用する: jQuery などのライブラリによって提供される自動 CSRF 保護モジュールを利用します。

See all articles