前端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.