Ajax异步请求获取提交数据&数据接口API

学习前端的小伙伴肯定对Ajax有所耳闻,那么这到底是个什么技术,初学前端的时候,了解到Ajax,只知道是一个异步交互技术,是前端和后端通信的主要技术手段。单却不知道异步是什么,为什么要和后端通讯,直到有一天,要做毕业设计,课题是动态网站开发。。。不懂后台的我不知道怎么开发,当时也不了解CMS等后台模板,之后听说网上有现成的数据接口Ajax请求数据调用就行了。好吧,那就去看看接口究竟是个啥。Ajax又怎么用。

经过查阅资料,找到了百度提供的API接口平台,其中有不少免费的。http://apistore.baidu.com/  最终我选择了天狗云社会热点API。

看了看文档和栗子都很全,好了,数据接口找到了,那么怎么放到我的网站上去那,这是一个问题,Ajax之前也仅仅一知半解,未知的东西都是可怕的,压根不知道是什么东西,感觉学习无从下手,也看了部分大牛的教学视频,不过一般都是自己配置服务器,自己写后台数据接口,看着看着就蒙了。这次打算自己研究研究。了解到jQuery提供了Ajax的一套函数,写起来简单,作为新手的我就从简单的入手吧。

这就是编辑器提示的整套函数的写法,这么一大堆,看了看下面的事件都用不到,写的成功函数就可以了

就这几句就好用了吗,就能从后台请求出数据?有点不太相信,果然不出所料,报错了。。

经过反复查阅资料得知是跨域的问题,返回数据格式改成跨域专用的jsonp就行了,这才想起接口文档有地方写着:“接口同时支持GET和POST两种请求方式,同时还支持AJAX跨站点JSONP请求”,好吧,自己粗心没看着。

QQ截图20160913201332

果然,新闻列表的数据就请求出来了,那就好办了。直接回调函数内用js循环出列表就行了。这么简单。

用js把文章标题和链接拼接到一个数组中,再把数组放到创建好的ul中,完事,预览。

11120160913201908

带链接的新闻列表就能打印出来了。是不是很简单。未知的东西感觉很难,了解之后不过如此,小伙伴们一起努力加油吧!!

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/170
欢迎转载,请以链接形式注明原始出处及本声明。

Be the first to comment

发表评论