前端11Jquery用ajax获取数据赋值给页面

前端11Jquery用ajax获取数据赋值给页面

 

 

 

 

https://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.asp    

jQuery 参考手册 - DOM 元素方法

 

 

【jQuery】使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
例如，点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“加载”按钮时，通过getJSON()方法调用服务器中的sport.json文件，获取返回的data文件数据，并遍历该数据对象，以data[“name”]取出数据中指定的内容，显示在页面中。
有几个地方不好理解：
function(data)是getJSON()方法的回调函数，也就是说执行了getJSON()方法后它就会执行，这里的data就是由getJSON方法从服务器地址取的数据，不需要定义。至于sport的话，你可以参考一下jQuery中each()函数的用法：

1


2

$(selector).each(function(index,element))
在这个例子中就相当于$.each(data,function(index,sport))
index就是取到的数据在数组中的位置，element就是具体的数据对象，sport作为function的参数，实际传入的是data数组中第index个对象，即data[index]，是一个json对象，所以sport["name"]就是这个json对象中的name对应的值。
————————————————
版权声明：本文为CSDN博主「badlyForPapers」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/happyhaojie/article/details/50348359

 

实例讲述了jQuery使用getJSON方法获取json数据。分享给大家供大家参考，具体如下：

demo.js：

[

   {

     "name" : "吴者然" ,

     "sex" : "男" ,

     "email" : "demo1@123.com"

   },

   {

     "name" : "吴中者" ,

     "sex" : "男" ,

     "email" : "demo2@123.