本文主要是介绍[JQuery] JQ 的AJAX方法 单层/双层JSON，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
单层
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"}]}
这篇关于[JQuery] JQ 的AJAX方法 单层/双层JSON的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
