html中通过js获取接口JSON格式数据解析以及跨域问题

Posted 2021-04-30 WEB前端vip

一、使用js获取接口数据的方法

 

①$get(url,[data],[callback])

data:请求数据的列表;

callback:请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个为服务器的状态,是可选参数。

其中服务器返回数据的格式其实是字符串形式,并不是我们想要的JSON数据格式。

例子：

var url = '接口';  
$.get(url,function(data){  
alert(data);
}); 

此时如果对data采用json解析数据，得到的值为undefined。所以我们使用这种get方法获取到的值要是JSON格式，需要定义获取的数据类型为json格式，

例子：
var url = '接口';  
$.get(url3,function(data){  
$('#result').append('<p>interval:'+data.name+'</p>')    //此时返回的是JSON格式的内容，例：我们可以使用data.name获取到name字段的值并输出。
}, 'json'); 

 

②$post(url,[data],[callback],[type])

post方法中多了一个type：获取数据的类型格式；

post其实和get是一样的用法，type不定义，返回的是字符串类型的，定义为json格式，返回的就是json格式的数据，此处可以仿照上面的get方法。

 

③$ajax(opiton)

ajax功能比较强大，可以有很多精确的控制。

JQuery中$.ajax()方法参数详解

2. type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和  

3.       delete也可以使用，但仅部分浏览器支持。  

4. timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设  

5.          置。  

6. async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。  

7.        如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等  

8.        待请求完成才可以执行。  

9. cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。  

10.        设置为false将不会从浏览器缓存中加载请求信息。  

11. data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格  

12.       式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格  

13.       式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同  

14.       值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。  

15. dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime  

16.           信息返回responseXML或responseText，并作为回调函数参数传递。  

17.           可用的类型如下：  

18.           xml：返回XML文档，可用JQuery处理。  

19.           html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。  

20.           script：返回纯文本javascript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求  

21.                   时（不在同一个域下），所有post请求都将转为get请求。  

22.           json：返回JSON数据。  

23.           jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个  

24.                 “?”为正确的函数名，以执行回调函数。  

25.           text：返回纯文本字符串。  

26. beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义  

27.             HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参  

28.             数。  

29.             function(XMLHttpRequest){  

30.                this;   //调用本次ajax请求时传递的options参数  

31.             }  

32. complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。  

33.           参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。  

34.           function(XMLHttpRequest, textStatus){  

35.              this;    //调用本次ajax请求时传递的options参数  

36.           }  

37. success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。  

38.          (1)由服务器返回，并根据dataType参数进行处理后的数据。  

39.          (2)描述状态的字符串。  

40.          function(data, textStatus){  

41.             //data可能是xmlDoc、jsonObj、html、text等等  

42.             this;  //调用本次ajax请求时传递的options参数  

43. error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错  

44.        误信息、捕获的错误对象(可选)。  

45.        ajax事件函数如下：  

46.        function(XMLHttpRequest, textStatus, errorThrown){  

47.           //通常情况下textStatus和errorThrown只有其中一个包含信息  

48.           this;   //调用本次ajax请求时传递的options参数  

49.        }  

50. contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认  

51.              为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。  

52. dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。  

53.             提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的  

54.             dataType参数。函数返回的值将由jQuery进一步处理。  

55.             function(data, type){  

56.                 //返回处理后的数据  

57.                 return data;  

58.             }  

59. global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局  

60.         ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。  

61. ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。  

62.             服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。  

63. jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。  

64.        该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如  

65.        {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。  

66. username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。  

67. password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。  

68. processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度  

69.              来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM  

70.              树信息或者其他不希望转换的信息，请设置为false。  

71. scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时  

72.                才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。  

73.    

74. 案例代码：  

75. $(function(){  

76.     $('#send').click(function(){  

77.          $.ajax({  

78.              type: "GET",  

79.              url: "test.json",  

80.              data: {username:$("#username").val(), content:$("#content").val()},  

81.              dataType: "json",  

82.              success: function(data){  

83.                          $('#resText').empty();   //清空resText里面的所有内容  

84.                          var html = '';   

85.                          $.each(data, function(commentIndex, comment){  

86.                                html += '<div class="comment"><h6>' +comment['username']  

87.                                          + ':</h6><p class="para"' + comment['content']  

88.                                          + '</p></div>';  

89.                          });  

90.                          $('#resText').html(html);  

91.                       }  

92.          });  

93.     });  

94. });  

95.    

96. 顺便说一下$.each()函数:  

97. $.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。  

 

例子：

$.ajax({
url: url,
data:{Full:"fu"},
type: "POST",
dataType:'json',
 success:function(data){
      $('#result').append('<p>interval:'+data.interval+'</p>')
//alert("22");    
 },
error:function(er){
//alert("11");
BackErr(er);
 }
});

④$getJSON(url,[data],[callback])

此处参数和get方法是一致的；

例子：

$.getJSON(url,function(data){
alert(data.name);           
});

以上类型因为接口访问时没有带参数，所以[data]这个参数我都省去了。如果有参数的话，格式为：

{  
    id: 'Robin',  
    password: '123456',  
    gate: 'index'  
  }

 

二、跨域问题的解决

 

在使用以上方法获取接口数据的过程中，我们突然发现有些接口无法将数据获取展示出来，使用chrome浏览器调试，我们发现报错如图：

此处我们使用设置Access-Control-Allow-Origin来实现跨域访问。

在被请求的Response header中加入

// 指定允许其他域名访问

header('Access-Control-Allow-Origin:*');

// 响应类型

header('Access-Control-Allow-Methods:POST');

// 响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type');

这样就可以实现ajax的跨域访问。

此处贴上示例代码以帮助大家上手，例HTML代码：

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  

2. <html>  

3.  <head>  

4.   <meta http-equiv="content-type" content="text/html;charset=utf-8">  

5.   <title> 跨域测试 </title>  

6.   <script src="//code.jQuery.com/jquery-1.11.3.min.js"></script>  

7.  </head>  

8.  <body>  

9.     <div id="show"></div>  

10.     <script type="text/JavaScript">  

11.     $.post("http://xxx.xxx.xxx/data.php",{name:"fdipzone",gender:"male"})  

12.       .done(function(data){  

13.         document.getElementById("show").innerHTML = data.name + ' ' + data.gender;  

14.       });  

15.     </script>  

16.  </body>  

17. </html>  

 

1. php代码:http://xxx.xxx.xxx/data.php  

2. <?php  

3. $ret = array(  

4.     'name' => isset($_POST['name'])? $_POST['name'] : '',  

5.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  

6. );  

7.   

8. header('content-type:application:json;charset=utf8');  

9. header('Access-Control-Allow-Origin:*');  

10. header('Access-Control-Allow-Methods:POST');  

11. header('Access-Control-Allow-Headers:x-requested-with,content-type');  

12.   

13. echo json_encode($ret);  

14. ?>  

15. 这里Access-Control-Allow-Origin:*表示允许任何域名跨域访问。  

16. 如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名  

17. 例如：header('Access-Control-Allow-Origin:http://www.baidu.com');  

18. 如果需要设置多个域名允许访问，这里需要用php处理一下  

19. 例如允许 www.baidu.com 与 www.sina.com 可以跨域访问  

20. <?php  

21. $ret = array(  

22.     'name' => isset($_POST['name'])? $_POST['name'] : '',  

23.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  

24. );  

25. header('content-type:application:json;charset=utf8');  

26. $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  

27. $allow_origin = array(  

28.     'http://www.baidu.com',  

29.     'http://www.sina.com'  

30. );  

31. if(in_array($origin, $allow_origin)){  

32.     header('Access-Control-Allow-Origin:'.$origin);  

33.     header('Access-Control-Allow-Methods:POST');  

34.     header('Access-Control-Allow-Headers:x-requested-with,content-type');  

35. }  

36. echo json_encode($ret);  

37. ?> 

 

JS 获取JSON数据简单调用

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

2.   

3. <html>  

4.   <head>  

5.     <title>异步调用JSON</title>  

6.   </head>  

7.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

8.   <script type="text/javascript">  

9.   <!--  

10.    var xmlhttp;  

11.     // 创建XMLHTTPRequest对象  

12.     function createXMLHTTPRequest()  

13.     {  

14.          if(window.ActiveXObject)//②如果当前浏览器为IE  

15.          {  

16.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  

17.          }  

18.          else if(window.XMLHttpRequest)//③如果是其他浏览器  

19.          {  

20.             xmlhttp = new XMLHttpRequest();  

21.          }else  

22.          {  

23.              alert("Your browser does not support XMLHTTP.");  

24.         }  

25.     }  

26.       

27.     function getInfo()  

28.     {  

29.       createXMLHTTPRequest();  

30.       xmlhttp.open("get", "http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action", true);  

31.       xmlhttp.onreadystatechange = returnInfo;  

32.       xmlhttp.send(null);  

33.     }  

34.       

35.     function returnInfo()  

36.     {  

37.       if(xmlhttp.readyState == 4)  

38.       {  

39.        var info = xmlhttp.responseText;  

40.        eval("var json= " + info);  

41.        var message="";  

42.        var dealerlocation="";  

43.        var salesphone="";  

44.       for(var i=0;i<json.dealers.length;i++){  

45.            message+="经销商名称：<font style='color:red;'>" + json.dealers[i].name + "</font>  <br/>";  

47.            dealerlocation+="经销商经纬度：<font style='color:red;'>" + json.dealers[i].location + "</font>  <br/>";  

48.       }  

49.          

50.   

51.        document.getElementById("showInfo").innerHTML = message;  

52.        document.getElementById("salesphone").innerHTML = salesphone  

53.        document.getElementById("location").innerHTML=dealerlocation;  

54.       }  

55.     }  

56.   

57.   -->  

58.   </script>  

59.   <body>  

60.     

61.   <br/><br/>  

62.   <h2 style="color: red;">异步调用JSON</h2>  

63.   <br/><input type="button" value="获取JSON数据" onclick="getInfo()" />  

64.    <table>  

65.     <tr>  

66.     <td><div id="showInfo"></div></td>  

67.     <td><span id="salesphone"><span></td>  

68.     <td><span id="location"><span></td>  

69.     </tr>  

70.    </table>  

71.   </body>  

72. </html>