单层
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>json 单层</title>
6 <script src="../framework/official/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
7
8 </head>
9 <body>
10
11 <input type="button" class="ajaxbutton" value="ajax获取数据内容" />
12 <input type="button" class="getjsonbutton" value="getjson获取数据内容"/>
13 <ul></ul>
14
15 <script type="text/javascript">
16 $(function(){
17 $(".ajaxbutton").on('click',function(){
18 // $.ajax获取数据
19 $.ajax({
20 // 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
21 url:"new_file.txt",
22 // 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
23 // xml:返回XML文档,可用JQuery处理。
24 // html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
25 // script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
26 // json:返回JSON数据。
27 // jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
28 // text:返回纯文本字符串。
29 dataType:"json",
30 // 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
31 type:"GET",
32 // data:{optionKey:2},
33 success:function(data){
34 // i表示在data中的索引位置,n表示包含的信息的对象
35 $.each(data,function(i,n){
36 $("ul").append(n["optionValue"]+"<br />");
37 })
38 },
39 // 要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
40 error:function(msg){
41
42 }
43 });
44 })
45 // getjson获取数据
46 $(".getjsonbutton").on("click",function(){
47 $.getJSON("new_file.txt",function(data){
48 $.each(data,function(index,ceshi){
49
50 $("ul").append(ceshi["optionKey"]+"<br />");
51
52 })
53 })
54 })
55 })
56 </script>
57 </body>
58 </html>
双层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例ajax加载测试------多种JSON</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../framework/official/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="col-md-12">
<table class="table table-striped">
<caption>实例ajax加载测试</caption>
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>臧三 </td>
<td>12</td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
<input type="button" class="btn btn-default btn1" value="$.get获取数据" />
<input type="button" class="btn btn-default btn2" value="$.ajax获取数据" />
</div>
<script type="text/javascript">
//jq的.get方法获取json 数据
$(".btn1").click(function(){
$.get("ajax_1.json",function(data,status){
for(var i=0;i<data.text.length;i++){
$("tbody").append(" <tr><td>"+data.text[i].name+"</td><td>"+data.text[i].year+"</td><td>"+data.text[i].sex+"</td></tr>")
}
})
});
//jq的ajax方法
$(".btn2").on('click',function(){
// $.ajax获取数据
$.ajax({
// 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
url:"ajax_1.json",
// 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
// xml:返回XML文档,可用JQuery处理。
// html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
// script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
// json:返回JSON数据。
// jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
// text:返回纯文本字符串。
dataType:"json",
// 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
type:"GET",
// data:{optionKey:2},
success:function(data){
// i表示在data中的索引位置,n表示包含的信息的对象
for(var i=0;i<data.text.length;i++){
$("tbody").append(" <tr><td>"+data.text[i].name+"</td><td>"+data.text[i].year+"</td><td>"+data.text[i].sex+"</td></tr>")
}
},
// 要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
error:function(msg){
}
});
})
</script>
</body>
</html>
JSON文件格式
[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]
{
"text": [
{
"name": "张三",
"year": "15",
"sex":"nan"
}, {
"name": "李四",
"year": "55",
"sex":"nv"
}, {
"name": "王彪",
"year": "15",
"sex":"nan"
}, {
"name": "龙舟",
"year": "256",
"sex":"nan"
}
]
}