jqueryのajaxを通じて現地のjsonファイルの方法を要求します。
自分でjqueryのajaxの経歴を学んで、記録してみます。
ajaxTestDemo.
bodyの中にidを置いてtestのdivです。
完全なページコード
ajaxTestDemo.
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ファイルの方法を求めます。小编はみんなにあげるすべての内容です。