ホームページ > 記事 > ウェブフロントエンド > ネイティブ Ajax を使用して JSON データを処理する方法
ネイティブ Ajax を使用して JSON データを処理する方法
- php中世界最好的语言オリジナル
- 2018-04-03 11:26:122998ブラウズ
今回は、ネイティブ 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の両側に二重引用符（または一重引用符）を追加します。これは、次のようなjson文字列になります。 json2
var json2='{"name":"李明","age":21,"sex":"boy"}'2. データ提供ページで、json を出力します。引き続き、データ提供ページを tigong.php と呼びます。コードは次のとおりです。
<?php
header("content-type:text/html;charset=utf-8");
echo '{"name":"黎明","age":"12","sex":"男"}';
?>3.終了ページに移動し、eval メソッドを使用して、json 文字列が json オブジェクトに解析され、for ループを使用してそれを走査します。このページを testJsonEvel.html
<!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>evel と呼びますが、互換性の問題はありませんが、セキュリティ ホールが存在します。 その効果は次の図に示されています:
4. JSON.parse メソッドを使用して、json 文字列を json オブジェクトに解析します。コードは次のとおりです。 JSON.parse にはセキュリティ上の脆弱性はありませんが、互換性があり、IE8 以下はサポートされていません。 効果は写真の通りです
全国天気予報のAPIデータを取得するAjax
MVC+ブートストラップインターフェースでAjaxフォーム検証を実行する方法
以上がネイティブ Ajax を使用して JSON データを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。