jquery基础学习之AJAX篇(五)
理解不深,只知道这么用
jquery 中ajax的请求方法
$.ajax({
url:‘http://...’, //请求网址
type:'GET', //请求方法
success:function(data){}//成功后的回调函数,这个data就是拿到的数据
})
跨域获取数据 ,jsonp方式跨域,只要规定 dataType:'jsonp'即可
$.ajax({
url:`https://api.douban.com/v2/book/search?q=历史`,
type:'GET',
dataType:'jsonp',
success:function (data) { //回调函数
let aa=JSON.stringify(data)//json转成字符串,才能填充到网页中去
console.log(data)//获取的数据
//对数据的处理
let cc=data.books.filter((item)=>{
return item.rating.average >8
}).map((item)=>{
return {
title:item.title,
bookId:item.id,
publisher:item.publisher
}
})
//console.log(cc)
}
})
}
script 标签跨域
向头部插入一个script标签,里面写上回调函数名称,然后就可以在回调函数中拿到数据并处理了。
function showData(data){
console.log(data)//这个data就是拿到的数据,可以在这里进行相关的处理
}
$('head').append('<script src='https://api.douban.com/v2/book/search?q='+'爱情'+'&callback=showData'><\/scpript>')
资料参考:https://www.cnblogs.com/chiangchou/p/jsonp.html
什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
跨域
首先我们需要明白,在页面上直接发起一个跨域的ajax请求是不可以的直接用ajax去请求一个网站,会报错,这时候在head添加一个script src='http://...?callback=funcName'的形式
然后这个funcName 函数就是接受获取的数据的,他有一个data参数,就是获取来的数据
如果出现报错 CORS头缺少“Access-Control-Allow-Origin”。 这条需要服务端去解决
有时候你会发现其它都没问题,出现这个错误:这个错误代表服务端拒绝跨域访问。如果出现这个错误,就需要在服务端设置允许跨域请求。
response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问
jquery基础学习之AJAX篇(五)的更多相关文章
- jquery基础学习之事件篇(三)
一.鼠标事件 click 单击 与 dbclick 双击 用于监听用户的点击操作,在同一元素上同时绑定 click 和 dblclick 事件是不可取的...根据浏览器支持不同一个点击事件是由mous ...
- jquery基础学习之动画篇(四)
一,动画效果 hide() show() 隐藏与显示 hide(options) 隐藏 对应display:none,有参数就会变成动画, $(document).click(function () ...
- jquery基础学习之DOM篇(二)
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...
- jquery基础学习之样式篇(一)
一.安装与使用 官网下载,然后引入 <script src="js/jquery-3.3.1.js"></script>,这是生产版本,开发版本替换成min ...
- salesforce零基础学习(一百零五)Change Data Capture
本篇参考: https://developer.salesforce.com/docs/atlas.en-us.232.0.api_streaming.meta/api_streaming/using ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
随机推荐
- maven scope使用和理解
在Maven的依赖管理中,经常会用到依赖的scope设置.这里整理下各种scope的使用场景和说明,以及在使用中的实践心得. scope的使用场景和说明 1.compile 编译范围,默认scope, ...
- stackoverflow愚人节彩蛋效果
效果如图所示: index.js /*! * Fairy Dust Cursor.js * - 90's cursors collection * -- https://github.com/thol ...
- ANTLR v4 权威参考笔记(目录)
ANTLR v4是一款强大的语法分析器生成器,可以用来读取.处理.执行和转换结构化文本或二进制文件.通过称为文法的形式化语言描述,ANTLR可以为该语言自动生成词法分析器.生成的语法分析器可以自动构建 ...
- 你可能不知道的IDEA高级调试技巧
一.条件断点 循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值. 参考上图,在断点的位置,右击断点旁边的小红点,会出来一个界面,在Condition这里填入断点条件即可 ...
- 从MySQL Bug#67718浅谈B+树索引的分裂优化(转)
原文链接:http://hedengcheng.com/?p=525 问题背景 今天,看到Twitter的DBA团队发布了其最新的MySQL分支:Changes in Twitter MySQL 5. ...
- C语言 · 超级玛丽
算法提高 超级玛丽 时间限制:1.0s 内存限制:256.0MB 问题描述 大家都知道"超级玛丽"是一个很善于跳跃的探险家,他的拿手好戏是跳跃,但它一次只能向前跳 ...
- 【ML入门系列】(二)分类与回归
前言 在机器学习中,“分类”和“回归”这两个词经常听说,但很多时候我们却混为一谈.本文主要从应用场景.训练算法等几个方面来叙述两者的区别. 本质区别 分类和回归的区别在于输出变量的类型.分类的输出是离 ...
- 并发编程(CountDownLatch使用)
一.简介: Latch意思是:门闩的意思,形象的来说await就是拴上门闩,等到门闩释放后当前线程开始工作. 下面是来自简书上的解释: CountDownlatch是一个多功能的同步工具,可以被用于各 ...
- 【App】不通过App Store实现ios应用分发下载安装(转)
转自:https://www.cnblogs.com/star91/p/5018995.html 最近公司的项目准备着手宣传工作了,宣传手册上要印制App的下载地址二维码,但是客户端应用还未上线, ...
- win10图片恢复默认照片查看器
文件名: win10图片恢复默认照片查看器.reg 双击该文件导入到注册表 Windows Registry Editor Version 5.00 ; Change Extension's File ...