使用原生ajax處理json字串的方法
JSON的全名為 Javascript Object Notation（javascript物件表示法），是基於javascript物件字面量。這篇文章主要介紹了使用原生ajax處理json字串的相關資料,需要的朋友可以參考下
#AJAX
AJAX = Asynchronous JavaScript and XML（非同步的JavaScript 和XML）。
AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。
什麼是json？
JSON的全名是Javascript Object Notation（javascript物件表示法），是基於javascript物件字面量，如果單從眼睛看，JSON裡的資料是被保存在花括號裡面-- {},如果在用途上面進一步分析，JSON是一種資料交換格式。 JSON內部以 名稱:值這種格式排列，如下面的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對象，我們把這個頁面稱為testJsonParse. 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=JSON.parse(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>JSON.parse不存在安全漏洞，但會有相容性，IE8及以下不支援。
效果如圖
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是使用原生ajax處理json字串的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP 數組轉 JSON 的效能最佳化技巧
May 04, 2024 pm 06:15 PM
PHP數組轉JSON的效能最佳化方法包括：使用JSON擴充和json_encode()函數；新增JSON_UNESCAPED_UNICODE選項以避免字元轉義；使用緩衝區提高循環編碼效能；快取JSON編碼結果；考慮使用第三方JSON編碼庫。
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
Jackson庫中註解如何控制JSON序列化和反序列化？
May 06, 2024 pm 10:09 PM
Jackson庫中的註解可控制JSON序列化和反序列化：序列化：@JsonIgnore：忽略屬性@JsonProperty：指定名稱@JsonGetter：使用獲取方法@JsonSetter：使用設定方法反序列化：@JsonIgnoreProperties：忽略屬性@ JsonProperty：指定名稱@JsonCreator：使用建構子@JsonDeserialize：自訂邏輯
深入了解PHP：JSON Unicode轉中文的實作方法
Mar 05, 2024 pm 02:48 PM
深入了解PHP：JSONUnicode轉中文的實作方法在開發中，我們經常會遇到需要處理JSON資料的情況，而JSON中的Unicode編碼在一些場景下會為我們帶來一些問題，特別是當需要將Unicode編碼轉換為中文字元時。在PHP中，有一些方法可以幫助我們實現這個轉換過程，以下將介紹常用的方法，並提供具體的程式碼範例。首先，讓我們先來了解一下JSON中Un
如何使用Ajax從PHP方法取得變數？
Mar 09, 2024 pm 05:36 PM
使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：
PHP 數組轉 JSON 的快捷技巧
May 03, 2024 pm 06:33 PM
PHP陣列可透過json_encode()函數轉換為JSON字串（例如：$json=json_encode($array);），反之亦可用json_decode()函數從JSON轉換為陣列（$array=json_decode($json);） 。其他技巧還包括：避免深度轉換、指定自訂選項以及使用第三方程式庫。
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 與 Ajax：提升 Ajax 安全性的方法
Jun 01, 2024 am 09:34 AM
為了提升Ajax安全性，有幾種方法：CSRF保護：產生令牌並將其傳送到客戶端，在請求中新增至伺服器端進行驗證。 XSS保護：使用htmlspecialchars()過濾輸入，防止惡意腳本注入。 Content-Security-Policy頭：限制惡意資源加載，指定允許載入腳本和樣式表的來源。驗證伺服器端輸入：驗證從Ajax請求接收的輸入，防止攻擊者利用輸入漏洞。使用安全Ajax函式庫：利用jQuery等函式庫提供的自動CSRF保護模組。
