今回は、ネイティブ ajax を使用して json データを処理する方法と、ネイティブ ajax を使用して json データを処理する場合の注意事項について説明します。以下は実際的なケースです。
AJAX
AJAX = 非同期の JavaScript と XML。 AJAX は新しいプログラミング言語 ではなく、既存の標準を使用する新しい方法です。
AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。jsonとは何ですか?
JSON の正式名称は Javascript Object Notation (javascript objectnotation) で、見た目だけ見ると、JSON 内のデータは中括弧内に格納されます。 --{} ,目的をさらに分析すると、JSON はデータ交換形式です。 JSON は内部的には name:value の形式で配置されており、以下の json1 は json オブジェクトです。
var json1={"name":"李明","age":21,"sex":"boy"}
文字通りの意味として、内部の二重引用符との衝突を避けるために、jsonの両側に二重引用符(または一重引用符)を追加します。これは、次のようなjson文字列になります。 json2
var json2='{"name":"李明","age":21,"sex":"boy"}'
<?php header("content-type:text/html;charset=utf-8"); echo '{"name":"黎明","age":"12","sex":"男"}'; ?>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> window.onload=function(){ var p1=document.getElementById("p1"); var bt1=document.getElementById("bt1"); bt1.onclick=function(){ //创建ajax对象,写兼容 if(window.XMLHttpRequest){ var xmlHttp=new XMLHttpRequest(); }else{ var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }; //获取要发送的数据,我们这个例子没有 //设置发送数据的地址和方法 xmlHttp.open("POST","tigongjson.php"); //设置我们的请求头信息 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //绑定onreadystatechange事件 xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ var data=xmlHttp.responseText; //json字符串转换成为json对象 data=eval("("+data+")"); var str=""; str+="姓名:"+data.name+"<br>"; str+="年龄:"+data.age+"<br>"; str+="性别:"+data.sex p1.innerHTML=str; }; }; //发送数据 xmlHttp.send(); }; }; </script> <style type="text/css"> #p1{ width:200px; height:200px; background:#f00; color:#fff; } img{ width:200px; } </style> <title>Document</title> </head> <body> <p id="p1"> <img src="../php2/images/1.gif"> </p> <br> <button id="bt1">点击获取json数据</button> </body> </html>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
全国天気予報のAPIデータを取得するAjax
MVC+ブートストラップインターフェースでAjaxフォーム検証を実行する方法
以上がネイティブ Ajax を使用して JSON データを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。