《前端》jQuery-ajax例子

我的jQuery-ajax的笔记：https://blog.csdn.net/bellediao/article/details/104239715

从其他博主那里截取的例子，并附有疑问解答。

例1：将接口中的result字段绘制成表格。

    
    
    
    


    
    
    
    
    

        

            

                
申请人省份
                
数量
            
        
        
    

解释：

接口里数据是这样的：

{"result":[{"申请人省份":"0","counts":1553},{"申请人省份":"上海市","counts":637},{"申请人省份":"云南省","counts":81},{"申请人省份":"内蒙古自治区","counts":52},{"申请人省份":"北京市","counts":1186},{"申请人省份":"吉林省","counts":90},{"申请人省份":"四川省","counts":443},{"申请人省份":"天津市","counts":249},{"申请人省份":"宁夏回族自治区","counts":15},{"申请人省份":"安徽省","counts":1633},{"申请人省份":"山东省","counts":780},{"申请人省份":"山西省","counts":60},{"申请人省份":"广东省","counts":1575},{"申请人省份":"广西壮族自治区","counts":367},{"申请人省份":"新疆维吾尔自治区","counts":48},{"申请人省份":"江苏省","counts":1889},{"申请人省份":"江西省","counts":90},{"申请人省份":"河北省","counts":164},{"申请人省份":"河南省","counts":261},{"申请人省份":"浙江省","counts":905},{"申请人省份":"海南省","counts":20},{"申请人省份":"湖北省","counts":434},{"申请人省份":"湖南省","counts":211},{"申请人省份":"甘肃省","counts":71},{"申请人省份":"福建省","counts":277},{"申请人省份":"西藏自治区","counts":5},{"申请人省份":"贵州省","counts":108},{"申请人省份":"辽宁省","counts":199},{"申请人省份":"重庆市","counts":193},{"申请人省份":"陕西省","counts":270},{"申请人省份":"青海省","counts":15},{"申请人省份":"香港","counts":1},{"申请人省份":"黑龙江省","counts":215}],"reason":"","status":"success"}

为了方便查看，部分数据转成json数据如下：

{
	"result": [{
		"申请人省份": "0",
		"counts": 1553
	}, {
		"申请人省份": "上海市",
		"counts": 637
	}, {
		"申请人省份": "云南省",
		"counts": 81
	}...],
	"reason": "",
	"status": "success"
}

创建步骤：

1、先引入jquery。

2、html部分。是一个表格（只有一个表头）和一个打印按钮。当点击按钮，触发onclick事件，调用在js里写的带有ajax函数。

3、js部分。创建printtable()函数，里面是$.ajax。

ajax里有 url、type、datatype、success属性。在success属性里面，写了console.log（数据）和使用each循环添加到table后面。

例2：ajax获取后端经纬度例子。

    
    
    
    


    
    
    
    
    

        

            输入地址：
            
        
    

疑问及解答：

此实例中，通过ajax请求一个可以获取地理位置的api接口，请求方式为get，请求参数为address和key。

1、在$.ajax()方法中，包含
      a. 请求参数列表data{ }
      b. 成功回调函数success:function(res){ }
a中的data表示的是请求接口所用的数据，b中res表示的是请求成功后接口返回的数据，即两者的内容没有直接关系，更不要说是相同的了。
2、如何查看数据是什么？

一般来说，可通过alert以弹窗形式展示想看的数据，或通过console.log()打印到控制台查看，后者在前端开发中常用。
3、对于提到的address和key请求参数是请求url中数据所需要的，至于为什么是这两个参数？这个key的值是哪里得到的？

这是设计接口的人决定的，不是前端人员决定的。

4、“data.geocodes[0].formatted_address+"经纬度："+data.geocodes[0].location”这个语句中geocodes[0]是什么？我怎么知道.formatted_address就是地名？location就是经纬度呢？我看了url中的数据是{"status":"0","info":"INVALID_USER_KEY","infocode":"10001"}。这样看不出data返回的数据是什么样的。

建议学习一下get请求的实现方式，

如果想通过查看url得到数据，以查询“上海”为例，可以通过：https://restapi.amap.com/v3/geocode/geo?address=上海&key=7486e10d3ca83a934438176cf941df0c 查看，而非https://restapi.amap.com/v3/geocode/geo

--------

jQuery的Ajax实例（附完整代码）_JavaScript_Yuan_mingyu的博客-CSDN博客  https://blog.csdn.net/Yuan_mingyu/article/details/86748591#comments

《前端》jQuery-each遍历用法_JavaScript_bellediao的博客-CSDN博客  https://blog.csdn.net/bellediao/article/details/104571627