通過jquery的ajax請求本地的json文件方法

來源：懂視網責編：小采時間：2020-11-27 22:10:25

通過jquery的ajax請求本地的json文件方法

通過jquery的ajax請求本地的json文件方法:自己學習jquery的ajax的經歷，記錄一下 ajaxTestDemo.html 在body里面放一個id為test的div <div id=test></div> 第一步還是要先加載jquery文件 jquery.min.js <script> $(function(){ $.

推薦度：

點擊下載本文 文檔為doc格式

導讀通過jquery的ajax請求本地的json文件方法:自己學習jquery的ajax的經歷，記錄一下 ajaxTestDemo.html 在body里面放一個id為test的div <div id=test></div> 第一步還是要先加載jquery文件 jquery.min.js <script> $(function(){ $.

自己學習jquery的ajax的經歷，記錄一下

ajaxTestDemo.html

在body里面放一個id為test的div

<div id="test"></div>

第一步還是要先加載jquery文件 jquery.min.js

<script>
 $(function(){
 $.ajax({
 //請求方式為get
 type:"GET",
 //json文件位置
 url:"./data/shuju.json",
 //返回數據格式為json
 dataType: "json",
 //請求成功完成后要執行的方法
 success: function(data){
 //使用$.each方法遍歷返回的數據date,插入到id為#result中
 var str="<ul>";
 $.each(data.list,function(i,n){
 str+="<li>"+n["item"]+"</li>";
 })
 str+="</ul>";
 $("#test").append(str);
 }
 });
 });
</script>

shuju.json文件

{
 "list":[
 {"item":"審計管理"},
 {"item":"菜單管理"},
 {"item":"訂單管理"},
 {"item":"合同管理"},
 {"item":"物流管理"},
 {"item":"行政管理"},
 {"item":"人事管理"},
 {"item":"購物管理"},
 {"item":"批發管理"},
 {"item":"安全管理"},
 {"item":"賬號管理"},
 {"item":"財務管理"},
 {"item":"其他管理"}
 ]
}

/* json文件里竟然不能有這樣的注釋，因為困擾了幾個小時！*/

完整的頁面代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>測試jquey的ajax方法</title>
 <style>
 *{
 padding:0;
 margin:0;
 }
 #test{
 padding: 0;
 margin: 0 auto;
 width:200px;
 height: 400px;
 }
 #test li{
 list-style: none;
 width:200px;
 text-align: center;
 height:30px;
 line-height:30px;
 border:1px dashed lightgrey;
 }
 </style>
</head>
<body>

<div id="test"></div>
<script src="js/jquery.min.js"></script>
<script>
 $(function(){
 alert(1);
 $.ajax({
 //請求方式為get
 type:"GET",
 //json文件位置
 url:"./data/shuju.json",
 //返回數據格式為json
 dataType: "json",
 //請求成功完成后要執行的方法
 success: function(data){
 //使用$.each方法遍歷返回的數據date,插入到id為#result中
 var str="<ul>";
 $.each(data.list,function(i,n){
 str+="<li>"+n["item"]+"</li>";
 })
 str+="</ul>";
 $("#test").append(str);
 }
 });
 });
</script>
</body>
</html>

還可以通過$.getJSON來獲取本地json文件

/* getJSON*/
$(function(){
 $.getJSON("./data/shuju.json",function(data){
 var str="<ul>";
 $.each(data.list,function(i,n){
 str+="<li>"+n["item"]+"</li>";
 })
 str+="</ul>";
 $("#test").append(str);
 });
});

以上這篇通過jquery的ajax請求本地的json文件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

通過jquery的ajax請求本地的json文件方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：請求 json json文件

熱門焦點

通過jquery的ajax請求本地的json文件方法

通過jquery的ajax請求本地的json文件方法

通過jquery的ajax請求本地的json文件方法

最新推薦

猜你喜歡

熱門推薦