整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
下面是Springboot中格式化顯示JSON數據的頁面代碼：
AJAX 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發 技術。
ajax 是一種瀏覽器通過 js 異步發起請求，局部更新頁面的技術。
Ajax 請求的局部更新，瀏覽器地址欄不會發生變化
局部更新不會舍棄原來頁面的內容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 在這里使用 javaScript 語言發起 Ajax 請求，訪問服務器 AjaxServlet 中 javaScriptAjax
function ajaxRequest() {
// 我們首先要創建 XMLHttpRequest
var xmlhttprequest=new XMLHttpRequest();
// 調用 open 方法設置請求參數
xmlhttprequest.open("GET","http://localhost:8080/Test/ajaxServlet?action=javaScriptAj
ax",true)
// 在 send 方法前綁定 onreadystatechange 事件，處理請求完成后的操作。
xmlhttprequest.onreadystatechange=function(){
if (xmlhttprequest.readyState==4 && xmlhttprequest.status==200) {
var jsonObj=JSON.parse(xmlhttprequest.responseText);
// 把響應的數據顯示在頁面上
document.getElementById("div01").innerHTML=" 編號：" + jsonObj.id + " , 姓名：" +
jsonObj.name;
}
}
// 調用 send 方法發送請求
xmlhttprequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
$.ajax 方法
url 表示請求的地址
type 表示請求的類型 GET 或 POST 請求
data 表示發送給服務器的數據
格式有兩種：
一：name=value&name=value
二：{key:value}
success 請求成功，響應的回調函數
dataType 響應的數據類型
常用的數據類型有：
text 表示純文本
xml 表示 xml 數據
json 表示 json 對象
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/Test/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert(" 服務器返回的數據是： " + data);
// var jsonObj=JSON.parse(data);
$("#msg").html(" 編號：" + data.id + " , 姓名：" + data.name);
},
dataType : "json"
});
});
方法和.post 方法
url 請求的 url 地址
data 發送的數據
callback 成功的回調函數
type 返回的數據類型
// ajax--get 請求
$("#getBtn").click(function(){
$.get("http://localhost:8080/Test/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 編號：" + data.id + " , 姓名：" + data.name);
},"json");
});
// ajax--post 請求
$("#postBtn").click(function(){
$.post("http://localhost:8080/Test/ajaxServlet","action=jQueryPost",function (data)
{
$("#msg").html(" post 編號：" + data.id + " , 姓名：" + data.name);
},"json");
});
$.getJSON 方法
url 請求的 url 地址
data 發送給服務器的數據
callback 成功的回調函數
// ajax--getJson 請求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 編號：" + data.id + " , 姓名：" + data.name);
});
});
表單序列化 serialize() serialize()可以把表單中所有表單項的內容都獲取到，并以 name=value&name=value 的形式進行拼接。
// ajax 請求
$("#submit").click(function(){
// 把參數序列化
$.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 編號：" + data.id + " , 姓名：" + data.name);
});
});
歡迎關注公眾號：愚生淺末。
不多說直接上代碼
<script type="text/javascript">
getJson('age');
function getJson(key){
var jsonObj={"name":"傅紅雪","age":"24","profession":"刺客"};
//1、使用eval方法
var eValue=eval('jsonObj.'+key);
alert(eValue);
//2、遍歷Json串獲取其屬性
for(var item in jsonObj){
if(item==key){ //item 表示Json串中的屬性，如'name'
var jValue=jsonObj[item];//key所對應的value
alert(jValue);
}
}
//3、直接獲取
alert(jsonObj[''+key+'']);
}
</script>
以上就是我的分享，覺得有收獲的朋友們可以點個關注轉發收藏一下哦，感謝各位大佬們的支持！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
