使用jQuery读取json文件

最新推荐文章于 2024-04-10 12:08:26 发布
最新推荐文章于 2024-04-10 12:08:26 发布
阅读量5k 收藏 7
点赞数 1
分类专栏： JS脚本 文章标签： javascript JQuery json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huapenguag/article/details/54613107
版权

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。  
$.getJSON(url,[data],[callback])

url：加载的页面地址 
data: 可选项，发送到服务器的数据，格式是key/value 
callback:可选项，加载成功后执行的回调函数 
1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:  
[ 
{ 
"name":"洪胜", 
"sex":"男", 
"email":"zhangguoli@123.com" 
}, 
{ 
"name":"温群", 
"sex":"男", 
"email":"zhangtieli@123.com" 
}, 
{ 
"name":"卓林", 
"sex":"女", 
"email":"zhenjie@123.com" 
} 
]
2.其次建一个页面用于获取JSON文件里的用户信息数据，并显示  
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TestGetJSON</title> 
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
<!--此处需要下载一个JQuery**.js放在相应的文件夹下-->
<style type="text/css"> 
#divframe{ border:1px solid #999; width:500px; margin:0 auto;} 
.loadTitle{ background:#CCC; height:30px;} 
</style> 
<script type="text/javascript"> 
$(function(){
$("#btn").click(function(){ 
//注意,这里面的路径是URL,UAG是在localhost下做的测试.
$.getJSON("js/userinfo.json",function(data){ 
var $jsontip = $("#jsonTip"); 
var strHtml = "123";//存储数据的变量 
$jsontip.empty();//清空内容 
$.each(data,function(infoIndex,info){ 
strHtml += "姓名："+info["name"]+"<br>"; 
strHtml += "性别："+info["sex"]+"<br>"; 
strHtml += "邮箱："+info["email"]+"<br>"; 
strHtml += "<hr>" 
}) 
$jsontip.html(strHtml);//显示处理后的数据 
}) 
}) 

}) 
</script> 
</head> 
<body> 
<div id="divframe"> 
<div class="loadTitle"> 
<input type="button" value="获取数据" id="btn"/> 
</div> 
<div id="jsonTip"> 
</div> 
</div> 
</body> 
</html> 




 

 

 
 
 
 
 
 
  •  运行效果如图:
  •  
     
 


                

        

        

    




    

      

        

            

              
                
                  山___
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    7
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery上传、解析json数据

				
			

			

				

					LJLatDGUt的博客
				

				

					04-18
					
					672
					
				

			

		

		

			
				
1.jquery 以post形式上传 json数据，重点需要注意使用

var formdata$("#myform").serialize();

来得到表单中的信息进行转化为流进行POST上传


var formdata = $("#myform").serialize();
$.ajax({
    type:'POST',
    url: 'http://localhost/phpe...

			
		

	



                

              
                



	

		

			

				
					
jQuery读取JSON文件

				
			

			

				

					kongjunchao159的博客
				

				

					08-06
					
					773
					
				

			

		

		

			
				
jQuery ajax - getJSON()方法：

$.getJSON("test.json",function(data){
    alert(data[0].name);
});

该函数是简写的Ajax函数，等价于：
$.ajax({
    url: url,
    data: data,
    success: callback,
    dataType

			
		

	



                


  
              

                


	

		

			

				
					
jQuery读取json数据

				
			

			

				

					08-17
				

			

		

		

			
				
jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性，提高了读取的效率，比读xml文件更加方面

			
		

	





	

		

			

				
					
JQuery中获取JSON文件中的数据

					
热门推荐

				
			

			

				

					Asurplus
				

				

					02-25
					
					21万+
					
				

			

		

		

			
				
1、使用 Ajax 方式获取

$.get("json/test.json", function(data) {
 	console.log(data.total);
});

另一种方式：
$.ajax({
     type: "get",
     url: "json/test.json",
     dataType: "json",
     async: false,
     s...

			
		

	



		

			
		



	

		

			

				
					
jQuery获取json文件的方法

					
最新发布

				
			

			

				

					ggq53219的博客
				

				

					04-10
					
					910
					
				

			

		

		

			
				
使用$.ajax方法获取JSON文件

			
		

	





	

		

			

				
					
jQuery获取JSON格式数据方法

				
			

			

				

					weixin_30867015的博客
				

				

					05-21
					
					378
					
				

			

		

		

			
				
getJSON方法：

jQuery.getJSON(url,data,success(data,status,xhr))


$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result_data){
    $.each(result_data, function(index, name...

			
		

	





	

		

			

				
					
处理JSON最强命令jq使用详解

				
			

			

				

					w727655308的博客
				

				

					11-08
					
					1万+
					
				

			

		

		

			
				
jq命令 json 处理json

			
		

	





	

		

			

				
					
使用json文件读取数据

				
			

			

				

					sun_8923的博客
				

				

					11-22
					
					2034
					
				

			

		

		

			
				
#读取json文件
import json
with open(path,encoding="utf-8") as op:
            contents = json.load(op)




			
		

	





	

		

			

				
					
jQuery ajax读取本地json文件的实例

				
			

			

				

					10-19
				

			

		

		

			
				
在本实例中，我们将探讨如何使用jQuery的Ajax功能来读取本地的JSON文件，并解析其中的数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。  首先，...

			
		

	





	

		

			

				
					
jQuery中读取json文件示例代码

				
			

			

				

					12-01
				

			

		

		

			
				
在JavaScript和jQuery的世界里，JSON（JavaScript Object Notation）是一种常用的数据交换格式，因其简洁、易读性而受到青睐。jQuery提供了方便的API来处理JSON数据，其中之一就是`$.getJSON()`函数，它允许我们从...

			
		

	





	

		

			

				
					
jQuery ajax读取json文件内容

				
			

			

				

					04-18
				

			

		

		

			
				
本文将深入探讨如何使用jQuery的ajax方法来读取JSON文件内容。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于服务器与客户端之间传递数据。  首先，理解jQuery的$.ajax()函数是关键。这是一...

			
		

	





	

		

			

				
					
JQuery独取本地JSON文件

				
			

			

				

					localhost
				

				

					12-14
					
					562
					
				

			

		

		

			
				
1. 确保使用WebStorm开发，否则在本地测试有跨域提示
2. 主文件，要引入JQuery库
<!DOCTYPE html>
<html lang="ZH_CN">

<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.js"></script>
...

			
		

	





	

		

			

				
					
jquery-使用ajax的getJSON方法，读取本地静态资源文件

				
			

			

				

					qq_40308101的博客
				

				

					07-04
					
					817
					
				

			

		

		

			
				
$.getJSON('js/demo/photos.json', function(json){
    layer.photos({
        photos: json
    });
});

			
		

	





	

		

			

				
					
jQuery 加载 JSON文件

				
			

			

				

					lvmingzhou的专栏
				

				

					11-11
					
					464
					
				

			

		

		

			
				
【代码】jQuery 加载 JSON文件。

			
		

	





	

		

			

				
					
前端jQuery读取本地文件内容

				
			

			

				

					小先生编程
				

				

					02-28
					
					4434
					
				

			

		

		

			
				
利用ajax 可直接读取本地json或txt文件的数据
 readFile('../data/data.json')
/**
 * 利用ajax 读取本地json文件的数据
 * @param {文件路径} url 
 */
function readFile(url){
    var param;
    $.ajax({
        url: url, //json文件位置
        type: "GET", //请求方式为get
        async: false,
        

			
		

	





	

		

			

				
					
Javascript——读取json文件方法总结

				
			

			

				

					helloyangkl的博客
				

				

					09-01
					
					4万+
					
				

			

		

		

			
				
Javascript——读取json文件方法总结

			
		

	





	

		

			

				
					
Html引入jquery.js并使用ajax读取本地json文件

				
			

			

				

					yanxi32666的博客
				

				

					06-17
					
					1450
					
				

			

		

		

			
				
html文件读取json文件并打印在控制台。复制网址到浏览器：https://code.jquery.com/jquery-3.6.0.min.js，右键"另存为"保存到自定义路径。本地json文件如下（示例）：
2.引入库并使用函数ajax请求本地json文件
代码如下（示例）：
点击按钮，效果如下图：...

			
		

	





	

		

			

				
					
JS读取本地json文件的方法汇总

				
			

			

				

					u012230371的博客
				

				

					07-27
					
					1万+
					
				

			

		

		

			
				
JavaScript 加载本地json

			
		

	





	

		

			

				
					
js和vue项目获取本地json文件的几种实现方法

				
			

			

				

					Java'sBestBlog
				

				

					12-23
					
					1万+
					
				

			

		

		

			
				
文章目录方法一：通过getJSON实现方法二：使用原生js实现方法三：使用AJAX实现在vue中实现获取json格式文件并编辑可能出现的问题
方法一：通过getJSON实现
getJSON是jquery提供的读取json格式文件的方法
首先我们将html中引入jquery,可以通过百度CDN引入，代码如下：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

然后就可以在scr

			
		

	





	

		

			

				
					
jquery读取本地json文件

				
			

			

				

					05-31
				

			

		

		

			
				
可以使用jQuery的ajax方法来读取本地的JSON文件。以下是一个简单的示例：  ```javascript $.ajax({  url: "data.json",  dataType: "json",  success: function(data){  console.log(data); // 在控制台中输出读取到...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值