JQuery之利用Ajax请求远程服务器上的json格式数据并解析

最新推荐文章于 2024-09-10 14:42:50 发布

水桶前辈

最新推荐文章于 2024-09-10 14:42:50 发布

阅读量6.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/robinson_911/article/details/77430528

版权

JavaScript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

通过Ajax的来请求远程服务器上的json格式数据解析出来并展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Demo</title>

    <style type="text/css">
    #ljbutton {
        background-color: #009A31;
        width:220px;
        cursor:pointer;        
        color: #FFFFFF;
        font-weight: bold;
        text-align:center;
        padding:5px;
      }
      </style>
      
<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script src="http://imgcache.gtimg.cn/club/platform/lib/seajs/sea-with-plugin-2.2.1.js?_bid=250&max_age=2592000" id="seajsnode"></script>
<!-- 百度的jquery-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 七牛云jquery -->
<!-- <script type="text/javascript" src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  -->

    <script type="text/javascript">

    var ljurl = 'https://raw.githubusercontent.com/robinson911/robinson911/master/ljweibo.json'
    // $(document).ready(function(){
	   $(function() {  
      	$('#ljbutton').click(function(){
      		if($.trim($('#ljbutton').text()) == '点击我')  
      		{
      			 $('#ljbutton').text('还原')
      		}
      		else{
      			$('#ljbutton').text('点击我')
      		}
            // alert($('#ljbutton').text())

           // eval可以把字符串转化为本地的json对象去执行
           // var ljTes = "alert('hello eval')"
           // eval(ljTes)
           
            // 此处通过ajax来下载远程服务器上的json数据，并解析显示出来
            $.ajax ({
             url:ljurl,
             type:'GET',
             dataType:'json',
             timeout:20000,
             error:function(){
               alert('Failed to communicate to the server. Try again!')   
             },success:function(ljdata){ 
             	
             var jsonData = eval(ljdata).data; //数组
             var jsonCode = eval(ljdata).code; //字符串
             var contnetstr = '';         
             $.each(jsonData, function (index, item) {     
                 var name = jsonData[index].name;  
                 var content = jsonData[index].content;    
                 //字符串拼接换行展示出来
                 contnetstr = contnetstr + name +'----' + content + '\r\n' + '\r\n';
             });  
             // alert(contnetstr)
             // 显示数据与code
		         // $('label').text(jsonCode)
             $('#label').text(contnetstr)
           }
     });
      	// });
}); 
      })  
    </script> 
     </head>

   <body>
        <div id="ljbutton">
          点击我
        </div>
         <div id ="label">            
             ceddfff         
         </div>
   </body>
</html>

在浏览器中输入：http://localhost/ajaxTest.php 回车

然后就可以看到这个效果图了：