整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
下面是Springboot中格式化顯示JSON數(shù)據(jù)的頁(yè)面代碼：
AJAX 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā) 技術(shù)。
ajax 是一種瀏覽器通過(guò) js 異步發(fā)起請(qǐng)求，局部更新頁(yè)面的技術(shù)。
Ajax 請(qǐng)求的局部更新，瀏覽器地址欄不會(huì)發(fā)生變化
局部更新不會(huì)舍棄原來(lái)頁(yè)面的內(nèi)容
<!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 語(yǔ)言發(fā)起 Ajax 請(qǐng)求，訪問(wèn)服務(wù)器 AjaxServlet 中 javaScriptAjax
function ajaxRequest() {
// 我們首先要?jiǎng)?chuàng)建 XMLHttpRequest
var xmlhttprequest=new XMLHttpRequest();
// 調(diào)用 open 方法設(shè)置請(qǐng)求參數(shù)
xmlhttprequest.open("GET","http://localhost:8080/Test/ajaxServlet?action=javaScriptAj
ax",true)
// 在 send 方法前綁定 onreadystatechange 事件，處理請(qǐng)求完成后的操作。
xmlhttprequest.onreadystatechange=function(){
if (xmlhttprequest.readyState==4 && xmlhttprequest.status==200) {
var jsonObj=JSON.parse(xmlhttprequest.responseText);
// 把響應(yīng)的數(shù)據(jù)顯示在頁(yè)面上
document.getElementById("div01").innerHTML=" 編號(hào)：" + jsonObj.id + " , 姓名：" +
jsonObj.name;
}
}
// 調(diào)用 send 方法發(fā)送請(qǐng)求
xmlhttprequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
$.ajax 方法
url 表示請(qǐng)求的地址
type 表示請(qǐng)求的類型 GET 或 POST 請(qǐng)求
data 表示發(fā)送給服務(wù)器的數(shù)據(jù)
格式有兩種：
一：name=value&name=value
二：{key:value}
success 請(qǐng)求成功，響應(yīng)的回調(diào)函數(shù)
dataType 響應(yīng)的數(shù)據(jù)類型
常用的數(shù)據(jù)類型有：
text 表示純文本
xml 表示 xml 數(shù)據(jù)
json 表示 json 對(duì)象
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/Test/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert(" 服務(wù)器返回的數(shù)據(jù)是： " + data);
// var jsonObj=JSON.parse(data);
$("#msg").html(" 編號(hào)：" + data.id + " , 姓名：" + data.name);
},
dataType : "json"
});
});
方法和.post 方法
url 請(qǐng)求的 url 地址
data 發(fā)送的數(shù)據(jù)
callback 成功的回調(diào)函數(shù)
type 返回的數(shù)據(jù)類型
// ajax--get 請(qǐng)求
$("#getBtn").click(function(){
$.get("http://localhost:8080/Test/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 編號(hào)：" + data.id + " , 姓名：" + data.name);
},"json");
});
// ajax--post 請(qǐng)求
$("#postBtn").click(function(){
$.post("http://localhost:8080/Test/ajaxServlet","action=jQueryPost",function (data)
{
$("#msg").html(" post 編號(hào)：" + data.id + " , 姓名：" + data.name);
},"json");
});
$.getJSON 方法
url 請(qǐng)求的 url 地址
data 發(fā)送給服務(wù)器的數(shù)據(jù)
callback 成功的回調(diào)函數(shù)
// ajax--getJson 請(qǐng)求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 編號(hào)：" + data.id + " , 姓名：" + data.name);
});
});
表單序列化 serialize() serialize()可以把表單中所有表單項(xiàng)的內(nèi)容都獲取到，并以 name=value&name=value 的形式進(jìn)行拼接。
// ajax 請(qǐng)求
$("#submit").click(function(){
// 把參數(shù)序列化
$.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 編號(hào)：" + data.id + " , 姓名：" + data.name);
});
});
歡迎關(guān)注公眾號(hào)：愚生淺末。
不多說(shuō)直接上代碼
<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所對(duì)應(yīng)的value
alert(jValue);
}
}
//3、直接獲取
alert(jsonObj[''+key+'']);
}
</script>
以上就是我的分享，覺(jué)得有收獲的朋友們可以點(diǎn)個(gè)關(guān)注轉(zhuǎn)發(fā)收藏一下哦，感謝各位大佬們的支持！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
