jQuery
入口函数
// 原生JS写法:
window.onload = function(){...}
// jQuery写法一:
jQuery(document).ready(function(){...})
console.log(jQuery===$);//说明$就是jQuery对象的简写
// jQuery写法二:
$(document).ready(function(){...})
// jQuery写法三:
$().ready(function(){...})
// jQuery写法四*重点*:
$(function(){...})
事件绑定
语法:
$(selector).事件(function(){...});
$(selector).on(事件, function(){...});
显示、隐藏与切换
$(selector).show(time); // 显示, time表示动画时长,单位为毫秒,下同
$(selector).hide(time); // 隐藏
$(selector).toggle(time); // 切换
//注意:凡是函数都要加 括号,函数就是所谓的方法,方法就是函数!
JQ中访问和修改文本
语法:
$(selector).html(); // 获取与修改选择器中的html内容
举例:$('div').html('<p>我是p标签</p>');
$(selector).text(); // 获取与修改选择器中的文本内容
举例:$('div').text('我是div标签');
jQuery对象和DOM对象相互转换
不同对象之间是不能使用对方的方法的。也就是说JS的对象只能JS调用,如果JQ想要用的话,就必须进行对象转换。比如:this<------>$(this)
$("div").click(function(){
$(this).html("文本内容")
})
JS转JQ对象:
// 使用$()包裹起来就可以用转成成JQ对象
document.getElementsByTagName(element)
==>
$( document.getElementsByTagName(element) )
JQ转JS对象:
// 方法一:
$(element).get(0) ==> document.getElementsByTagName(element)
// 方法二:
$(element)[0] ==> document.getElementsByTagName(element)
css样式修改
语法:
$(selector).css()
css本身也是一个函数,其中的格式有两种:
第一种为单属性修改:
$(selector).css('key', 'value'); //只能修改一个属性和一个属性值
第二种为多属性修改:
$(selector).css({
'key': 'value',
'key': 'value'
....
}) //可以多属性修改,理论上可以修改无限多个属性
访问某个元素的css属性,可以直接这么写:$(selector).css(k);
console.log( $('div').css('width') ); //这段代码可以获取div的宽度
标签属性的修改
修改属性的两个方法
$(element).attr(“k”,”v”);
$(element).prop(“k”,”v”);
prop和attr的区别
-
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
操作原生表单属性
-
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
自定义属性使用
jQuery常用选择器
基础选择器
基本选择器 | 语法 | 功能 |
---|---|---|
ID选择器 | $(’#ID’) | 找到匹配指定ID的元素 |
元素(标签)选择器 | $(‘element’) | 找到指定的元素 |
class选择器 | $(’.class’) | 找到匹配指定class的元素 |
通配符选择器 | $(’*’) | 匹配所有元素 |
并集(组合)选择器 | $(‘sel,sel’) | 多个选择器匹配的元素合并 |
层级选择器 | 语法 | 功能 |
---|---|---|
后代选择器 | $(‘parent child’) | 当前元素的所有后代元素 |
直接后代选择器 | $(‘parent>child’) | 当前元素所有的子元素 |
下一个兄弟 | $(‘prev+next’) | 当前元素的下一个元素 |
后面所有兄弟 | $(‘prev~siblings’) | 当前元素后面的所有兄弟元素 |
筛选选择器
基本筛选选择器 | 语法 |
---|---|
获取第一个元素 | $(‘ele:first’) |
获取最后一个元素 | $(‘ele:last’) |
获取指定索引的元素 | $(‘ele:eq(index)’) 方法eq(index) |
获取所有元素除某个 | $(‘ele:not(selector)’) |
获取索引为偶数的元素 | $(‘ele:even’) |
获取索引为奇数的元素 | $(‘ele:odd’) |
获取大于该索引元素 | $(‘ele:gt(index)’) |
获取小于于该索引元素 | $(‘ele:lt(index)’) |
获取所有标题类型元素 | $(‘ele:header’) |
级别选择器相关方法
parent方法
$(selector).parent()
表示选中所有匹配元素的唯一父元素。
《关闭悬浮广告》解决方案:
// 原生JS方法:
// 选中所有button
var oBtns = document.getElementsByTagName('button');
for(var i=0;i<oBtns.length;i++){
oBtns[i].onclick = function(){
// 找到父级,把父级display=none
// console.log( this.parentNode );
this.parentNode.style.display = "none";
}
}
// JQ方法:
$('button').click(function(){
// 选择这个按钮的父级 - 这个$(this) 父级.parent()
$(this).parent().hide();
})
siblings方法
$(selector).siblings()
表示选中某个元素同级的元素,括号内有写元素,表示选中同级的某个元素,如果没有书写,则表示选中同级的所有元素!
排他思想
// 原生JS方法
var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
for(var k=0;k<btns.length;k++){
btns[k].style.background = "none";
}
this.style.background = "pink";
}
}
// JQ方法:
$('button').click(function(){
// siblings()兄弟节点,
// 两个方法都是作用于$(this)的,可以使用链式编程
$(this).css('background', 'skyblue').siblings('button').css('background', 'none');
})
children方法
$(selector).children()
表示选中某个元素的子级元素,括号内有写元素,表示选中子级中的某个元素,如果没有书写,则表示选中子级的所有元素!
书城特效
// 原生JS方法
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
// 鼠标移入
lis[i].onmouseenter = function(){
// 让p标签隐藏
this.children[0].style.display = "none";
// 让img显示
this.children[1].style.display = "block";
}
// 鼠标移出
lis[i].onmouseleave = function(){
// 让p标签显示
this.children[0].style.display = "block";
// 让img隐藏
this.children[1].style.display = "none";
}
}
// JQ 方法
// 初级解决方案
// mouseover 、 mouseout 是一对儿,机制相同。会冒泡
// mouseenter 、 mouseleave是一对儿,机制相同。不冒泡
$('li').mouseenter(function(){
$(this).children('img').show().siblings().hide();
})
$('li').mouseleave(function(){
$(this).children('p').show().siblings().hide();
})
// 中级解决方案
$('li').hover(function(){
$(this).children('img').show().siblings().hide();
}, function(){
$(this).children('p').show().siblings().hide();
})
// 高级解决方案
$('li').hover(function(){
$(this).children().toggle();
})
动态设置class的方法
索引值方法
在JQ中,**index()**是一个方法(函数),所以必须加括号!用来获取当前元素在父级中的索引值。
语法:
$(selector).index();// 获取索引值方法
// 原生方法
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].setAttribute("myindex", i);
btns[i].onclick = function () {
console.log(this.getAttribute("myindex"));
};
}
// JQ index方法
$("button").click(function(){
var index = $(this).index();
console.log(index);
})
addClass与removeClass方法
语法:
// 给某个元素添加类名,理论上,一个标签可以添加无数多个类名,用空格分开
$(selector).addClass(“className1 className2 className3”)
// 给某个元素移除类名
$(selector).removeClass(“className1 className2 className3”)
《Tab栏》案例
// 原生方法
var btns = document.getElementsByTagName("span");
var pages = document.getElementsByTagName("li");
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onmouseenter = function () {
for (var j = 0; j < btns.length; j++) {
btns[j].className = "";
pages[j].className = "";
}
this.className = "current";
pages[this.index].className = "current";
};
}
// JQ方法
$("span").hover(function () {
var index = $(this).index();
$(this).addClass("current").siblings().removeClass("current");
$("li").eq(index).addClass("current").siblings().removeClass("current");
});
toggleClass
语法:
// 切换某个元素的类名(添加或删除)
$(selector).toggleClass(“className”)
《百度风云榜》案例
$('span').click(function(){
// 让当前列表切换收放
$(this).toggleClass('open').siblings('ol').slideToggle();
// 让其他列表收起
$(this).parent().siblings().children('ol').slideUp().siblings('span').removeClass('open');
})
// 代码优化:
// 链式编程:在一个方法后调用另一个方法
// 原理:每一个方法都会去找最近的一个对象(事件源)
// 本质上是每个函数末尾加了return this,将调用该函数的jquery对象返回
// 同时由于只对 DOM 进行了一轮查找,性能方面更加出色。
$('span').click(function(){
$(this).toggleClass('open')// "当前span"
.siblings('ol')// 将事件源"当前span"变成了"当前ol"
.slideToggle()// "当前ol"
.parent()// 将"当前ol"变成了"当前父级li"
.siblings()// 将"当前父级li"变成了"其他父级li"
.children('ol')// 将"其他父级li"变成了"其他父级的ol"
.slideUp()// "其他父级的ol"
.siblings('span')// 将"其他父级的ol"变成了"其他父级的span"
.removeClass('open');// "其他父级的span"
})
表单相关方法
val获取表单中的值
获取input 或 textarea 的值我们可以通过以下方式获取:
// ()内部写入文本可以实现修改功能
$('input').val()
$('textarea').val()
获取select下拉框的值
<select id="selectBrowser">
<option value="1">pc</option>
<option value="2">phone</option>
<option value="3">pad</option>
</select>
<script>
$("#selectBrowser").change(function(){
console.log($(this).val());
})
</script>
trim去除前后空格
表单输入时去除前后空格,我们可以用:
$.trim()
// 通常来说提交表单时,输入框的值是不允许为空的,并且包括空格,这样的数据是无意义的,此时需要做校验,提示用户重新输入
var val = $('input').val();
if( $.trim(val)=="" ){
alert('请重新输入');
}
节点控制
节点node | nodeType | nodeName | nodeValue |
---|---|---|---|
元素节点 | 1 | 标签名(大写) | null |
属性节点 | 2 | 属性名 | 属性值 |
文本节点 | 3 | #text | 文本内容 |
CDATA节点 | 4 | #cdata-section | CDATA区域内容 |
实体引用名称节点 | 5 | 引用名称 | null |
实体名称节点 | 6 | 实体名称 | null |
处理指令节点 | 7 | target | entire content cluding the target |
注释节点 | 8 | #comment | 注释内容 |
文档节点 | 9 | #document | null |
文档类型节点 | 10 | doctype的名称 | null |
文档片段节点 | 11 | #document-fragment | null |
DTD声明节点 | 12 | 符号名称 | null |
增加子节点
语法:
// 在某个元素的子级中,往后面添加节点
$(element).append('子节点')
// 在某个元素的子级中,往前面添加节点
$(element).prepend('子节点')
// 点击增加一个li标签在ul的最前
$('.before').click(function(){
var val = $.trim($('input').val());
if(val)$('ul').prepend('<li>'+val+'</li>');
$('input').val("");
})
// 点击增加一个li标签在ul的最后
$('.after').click(function(){
var val = $.trim($('input').val());
if(val)$('ul').append('<li>'+val+'</li>');
$('input').val("");
})
增加同级节点
语法:
// 在element之前添加兄弟节点
$(element).before('兄弟节点')
// 在element之后添加兄弟节点
$(element).after('兄弟节点')
// 点击增加一个标签在p.brother之前
$('button').eq(0).click(function(){
$('.brother').before('<p>我是前p</p>');
})
// 点击增加一个标签在p.brother之后
$('button').eq(1).click(function(){
$('.brother').after('<p>我是后p</p>');
})
节点的删除
语法:
// 将element节点中的子级节点包括内容清空
$(element).empty();
// 删除element节点包括内容
$(element).remove();
$('button').eq(0).click(function(){
$('ul').empty(); // 清空ul中的内容
})
$('button').eq(1).click(function(){
$('ul').remove(); // 直接删除ul
})
节点的替换
语法:
// 用后者替代前者
$(element1).replaceWith(element2);
$('button').click(function(){
// p替代li
$('li').eq(1).replaceWith(`<p>这是个p标签</p>`);
})
事件委托
定义:
事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。
为什么要用事件委托?
给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。
事件委托语法:
// 事件和函数是必填的,子级选择器选填(不填就是普通事件绑定)
$(selector).on(事件,children,function(e){...})
// 1ms之后再添加一下li元素
setTimeout(function () {
$('ul').append('<li>6</li>')
}, 1)
// 普通事件绑定(办不到)
// $('li').click(function(){
// var index=$(this).index()+1
// console.log(index);
// })
// 事件委托(重点)
$('ul').on('click', 'li', function () {
var index = $(this).index() + 1
// 此时this指向的是‘li’
console.log(this, index);
})
// 事件解绑
$('ul').click(function(){
console.log(111);
})
$("button").click(function(){
$('ul').off('click', 'li')
})
// 另一种诡异写法(JQ项目很多这样的写法)
setTimeout(function () {
$('ul').append('<li onclick="getIndex(this)">6</li>')
}, 1)
function getIndex(myThis){
var index=$(myThis).index()+1
console.log(index);
}
键盘事件和键码
键盘事件
$(selector).keydown(function(){...});// 键盘按下事件
$(selector).keyup(function(){...});// 键盘松开事件
键码
e.keyCode – 键码
回车键——13
$("textarea").keyup(function (e) {
classAdd()
// 3、点击回车,发布
if (e.keyCode == 13) {
sumFn();
}
});
计算机网络基础
万维网
万维网(World Wide Web),亦作“WWW”、“Web”,是一个透过互联网访问的,由许多互相链接的超文本组成的系统。
web服务三要素:
- 统一资源标识符(URI),这是一个统一的为资源定位的系统,URI可以分为URL和URN或同时具备locators 和names特性的一个东西
- URN:Uniform Resource Name 是一种使用字符串表示资源名字的方法
- URL: Uniform Resource Location 是一种使用字符串表示资源所在位置的方法
- 换句话说:URN确定了东西的身份,URL提供了找到它的方式。
- 超文本传送协议(HTTP),它负责规定客户端和服务器怎样互相交流。
- 超文本标记语言(HTML),作用是定义超文本文档的结构和格式。
CS 架构
CS 即 Client/Server(客户机/服务器)结构,C/S 结构在技术上很成熟,它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发,变更不够灵活,维护和管理的难度较大。通常只局限于小型局域网,不利于扩展。并且,由于该结构的每台客户机都需要安装相应的客户端程序,分布功能弱且兼容性差,不能实现快速部署安装和配置,因此缺少通用性,具有较大的局限性。要求具有一定专业水准的技术人员去完成。比如 QQ,微信,绝地逃生等等。
BS 架构
BS 即 Browser/Server(浏览器/服务器)结构,就是只安装维护一个服务器(Server),而客户端采用浏览器(Browse)运行软件。B/S 结构应用程序相对于传统的 C/S 结构应用程序是一个非常大的进步。 B/S 结构的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低,这些缺点是有目共睹的,难以实现传统模式下的特殊功能要求。例如通过浏览器进行大量的数据输入或进行报表的应答、专用性打印输出都比较困难和不便。此外,实现复杂的应用构造有较大的困难。企业应用中大多数度使用 BS 架构,比如淘宝,京东,优酷,爱奇艺等等。
浏览器访问网站的基本过程
IP地址
要想使网络中的计算机能够进行通信,必须为每台计算机指定一个标识号,通过这个标识号来指定接受数据的计算机或者发送数据的计算机。在TCP/IP协议中,这个标识号就是IP地址,它可以唯一标识一台计算机。 相当于电话号码和电话。
端口号
通过IP地址可以连接到指定计算机,但如果想访问目标计算机中的某个应用程序,还需要指定端口号。在计算机中,不同的应用程序是通过端口号区分的。
Hosts文件
Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应网页,如果没有找到,则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。
DNS
域名系统(英文:DomainNameSystem,缩写:DNS)是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前,对于每一级域名长度的限制是63个字符,域名总长度则不能超过253个字符。
基本流程(重点)
用户输入网址,
浏览器请求DNS服务器, 获取域名对应的IP地址,
请求连接该IP地址服务器,
发送资源请求. (遵循HTTP协议)
web服务器接收到请求, 并解析请求, 判断用户意图,
获取用户想要的资源,(链接数据库从数据中获取数据)
将资源返回给http服务器程序,
http服务器程序将资源数据通过网络发送给浏览器 (响应给浏览器),
浏览器解析呈现请求的数据
域名与域名服务器
1、网站: www.sina.com.cn
-www: 主机名 ,ftp、svn、stmp、xmpp服务
- sina:机构名
- com:机构类型 com net edu org xxx
- cn: 地区名 tw hk us uk jp
2、域名服务器(DNS)
进行域名和与之相对应的IP地址转换的服务器
Http协议简介
http的认识
HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面<网页>的方法。
http协议:
- HTTP 超文本传输协议(hypertext transfer protocol) :用于web服务器与浏览器之间传输数据的协议
- HTTP协议是基于TCP/IP协议的,发送数据之前需要建立好连接
- http协议的请求响应模型包含浏览器与http服务器的request、response请求响应模型
TCP/IP协议
TCP/IP协议不仅仅指的是TCP 和IP两个协议,而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇, 只是因为在TCP/IP协议中TCP协议和IP协议最具代表性,所以被称为TCP/IP协议。
http协议是基于TCP/IP协议的,TCP/IP协议是一个可靠的传输协议。
浏览器(客户端)和服务器建立连接的时候,发生三次握手:
浏览器(客户端)和服务器断开连接的时候,发生四次挥手:
http请求request报文格式
- 请求行
- HTTP 请求的类型——get post
- GET 浏览器仅仅只是获取网页数据(普通)
- POST 客户端向服务器提交数据(高级)
- 请求资源的路径——请求url
- HTTP 协议版本——1.0 1.1
- HTTP 请求的类型——get post
- 请求头
- [头名: 头值]
- 空行
- 分割符"\r\n"
- 请求体
- 浏览器给服务器发送的数据
- post才有请求体
- get的请求参数在url上
常见的请求头:**
- Accept:浏览器可以接受的数据类型。
- Accept-Encoding:浏览器支持解码的数据压缩格式 如:gzip。
- Accept-Language:浏览器的语言环境。
- Cache-Control:缓存控制命令
- Host:请求的主机名,允许多个域名同处一个 IP 地址,即虚拟主机。
- Connection:表示是否需要持久连接。如 Keep-Alive。
- Content-Length:表示请求体的长度。
- Content-Type:浏览器告诉 WEB 服务器请求数据的类型和字符集。
- MIME 描述消息内容类型的因特网标准
- text/html 超文本
- text/plain 普通文本
- text/xml XML格式
- application/x-www-form-urlencoded 浏览器默认
- application/json 来告诉服务端消息主体是序列化后的 JSON 字符串
- multipart/from-data 表单上传文件时
- charset:utf-8;
- MIME 描述消息内容类型的因特网标准
- Cookie:浏览器每次都会将 cookie 发送到服务器上,允许服务器在客户端存储少量数据。
- Referer:包含一个 URL,用户从该 URL 代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。
- User-Agent:用户代理:浏览器相关信息,客户机相关信息。
http响应response报文格式
- 响应行
- 协议版本
- 状态码
- HTTP/1.1 中定义了 5 类状态码。状态码由三位数字组成,第一个数字定义了响应的类别
- 1XX 提示信息 - 表示请求已被成功接收,继续处理。
- 2XX 成功 - 表示请求已被成功接收,理解,接受。
- 3XX 重定向 - 要完成请求必须进行更进一步的处理。
- 4XX 客户端错误 - 请求有语法错误或请求无法实现。
- 5XX 服务器端错误 - 服务器未能实现合法的请求。
- HTTP/1.1 中定义了 5 类状态码。状态码由三位数字组成,第一个数字定义了响应的类别
- 状态说明
- 响应头
- [头名: 头值]
- 空行
- “\r\n”
- 响应体
- 返回给客户端的具体数据
- html文本
- 资源数据
- 返回给客户端的具体数据
常见响应头:
Server:服务器软件的信息和版本。
Accept-Ranges:服务器表明是否接受获取其某个实体的一部分的请求。
Cache-Control:缓存控制命令
Date:服务器回复响应报文的时间 – 格林威治时间
Content-Type:返回的响应体的数据类型。text/html text/plain application/json
Allow:服务器支持哪些请求方法(如 GET、POST 等)。
Content-Base:解析主体中的相对 URL 时使用的基础 URL。
Content-Encoding:对响应体数据采用的压缩方式。
Content-Language:告诉浏览器理解主体时最适宜使用的自然语言。
Content-Length:表明响应体的大小,例如 26012。
Content-Location:资源实际所处的位置。
Content-MD5:主体的 MD5 校验和。
Content-Range:表示传送的范围。
Expires:过期相关信息。
Last-Modified:WEB服务器认为对象的最后修改时间。
Connection:keep-alive不关闭TCP连接,长连接
AJAX技术简介
使用 JavaScript 代码发送网络请求并处理响应,由浏览器实现。
定义:ajax技术就是在页面不刷新情况下,和服务器端进行交互的技术。
所以ajax特点是:异步请求,局部刷新
-
这里的同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
-
这里的异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
-
这里局部刷新是指:刷新页面部分内容。
优缺点:
优点:Web 应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息,减轻服务器压力。
缺点:浏览器实现之间有差异处理兼容性问题;不能回退和前进;默认不支持跨域访问—好事(可以自主学习相关知识:同源策略)。\
域名,端口,协议完全相同的两个URL是同源的-----只要不是同源的域名就会发生跨域
AJAX 对象中有 4 个属性:
- readyState 总共有 5 个状态值,分别为 0 ~ 4,每个值代表了不同的含义:
- 0:初始化,AJAX 对象还没有完成初始化
- 1:载入,AJAX 对象开始发送请求
- 2:载入完成,AJAX 对象的请求发送完成
- 3:解析,AJAX 对象开始读取服务器的响应
- 4:完成,AJAX 对象读取服务器响应结束
- status 表示响应的 HTTP 状态码,常见状态码如下:
- 200 OK:请求成功
- 302 Found:重定向,新的 URL 会在 response 中的 Location 中返回,浏览器将会使用新的 URL 发出新的 Request
- 304 Not Modified:已缓存,文档已经被缓存,直接从缓存调用
- 400 Bad Request:客户端请求有语法错误,不能被服务器所理解
- 403 Forbidden:服务器收到但拒绝服务,引用外部资源触发防盗链
- 404 Not Found:找不到资源,请求资源不存在
- 500 Internal Server Error:服务端错误,服务器发生了不可预期的错误
- 503 Server Unavailable:服务器当前不能处理客户端的请求,一段时间后可能恢复正常
- responseText 获得字符串形式的响应数据。
- responseXML 获得 XML 形式的响应数据。
使用ajax发送get请求
// 1、创建 AJAX 对象;new XMLHttpRequest()
// 2、设置请求路径,请求方式等;ajax.open(请求方式,路径)
// 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;ajax.onreadystatechange
// 4、发送请求。ajax.send
btn.onclick = function(){
// 1、创建 AJAX 对象;
var ajax = new XMLHttpRequest();
// 2、设置请求路径,请求方式等;ajax.open(请求方式,路径)
ajax.open('get', 'http://kumanxuan1.f3322.net:8809/travels/query');
// 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;
ajax.onreadystatechange = function(){
// console.log(ajax.readyState);
if(ajax.readyState==4 && ajax.status==200){
// 此时获取服务器发过来的数据
console.log(ajax.responseText) // 得到的是字符串对象,需要用JSON.parse(txt)转对象
}
}
// 4、发送请求。
ajax.send();
}
使用ajax发送post请求
// 后台要求携带参数:
// 用户名 - username
// 密码 - password
btn.onclick = function () {
// 1、创建 AJAX 对象
var ajax = new XMLHttpRequest();
// 2、设置请求路径,请求方式等
ajax.open("post", "http://kumanxuan1.f3322.net:8809/users/login");
// 3、设置请求头,不然无法传递参数到后台
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4、绑定监听状态改变的处理函数
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
// 5、发送请求并携带参数
ajax.send(`username=${user.value}&password=${pwd.value}`)
}
总结:
- 需要获取数据的时候,使用get请求
- 需要传递参数给后台并完成某些功能的时候,使用post请求
jQuery 中 ajax 使用
基本语法:
// 方法一:什么请求都可以发
$.ajax(url,{[settings]});
// 方式二:只能发送get请求
$.get(url, [data], [callback])
// 方式二:只能发送post请求
$.post(url, [data], [callback])
$.ajax的使用
举例:
$.ajax({
url: 'url',
type: 'GET',
data: {username:'zs', password:'12345'},
success: function(data){
// 请求成功业务逻辑
}
});
发送GET请求
使用.ajax()方法发送get请求:
$('button').click(function(){
$.ajax({
type: "GET",
url: "http://kumanxuan1.f3322.net:8809/travels/query",
success: function(res){
console.log(res);
}
})
})
使用.get()方法发送get请求:
$.get()方法接收四个参数:
- url:请求 URL 地址
- data:请求参数。
- callback:请求成功时回调函数。
- type:预期服务器返回的数据类型。
$('button').click(function(){
$.get("http://kumanxuan1.f3322.net:8809/travels/query",
function (res) {
console.log(res)
})
})
发送POST请求
使用.ajax()方法发送post请求:
$('button').click(function(){
$.ajax({
url: "http://kumanxuan1.f3322.net:8809/users/login",
type: "POST",
data: {
username: $('#username1').val(),
password: $("password1").val()
},
success: function(res){
console.log(res)
}
})
})
使用.post()方法发送post请求:
$.post()方法同样接收四个参数:
- url:请求 URL 地址
- data:请求参数。
- callback:请求成功时回调函数。
- type:预期服务器返回的数据类型。
$('button').click(function(){
$.post('http://kumanxuan1.f3322.net:8809/users/login', {
username: $('#username1').val(),
password: $("#password1").val()
}, function(res){
console.log(res)
})
})
骡窝窝官网项目
postman的使用
首页-banner
- 使用ajax调用接口
- 处理数据,并将通过数据改变dom
- 点击按钮切换banner
- 轮播效果
// 1.入口函数
$(function () {
// 2.发送ajax请求
$.ajax({
url: "http://kumanxuan1.f3322.net:8809/index/banners/travel",
type: "GET",
data: {},
success: function (res) {
// console.log(res.data);
$("#_j_mfw_focus ul.show-image").empty();
$("#_j_mfw_focus ul.show-nav").empty();
// 3.数据处理
$.each(res.data, function (index, item) {
// console.log(a, b);
// 4.dom操作
$("#_j_mfw_focus ul.show-image").append(`
<li data-id="0" class="show_image">
<a href="./traveldetail.html?id=${item.refId}"
class="show-pic">
<img src="${item.coverUrl}">
</a>
<a href="javascript:;" class="show-title dark">
<div class="date">
<span class="day">15</span>/Oct.2020
</div>
<h3>${item.title}</h3>
</a>
</li>
`)
$("#_j_mfw_focus ul.show-nav").append(`
<li class="show_nav" onclick = checkBg(${index})>
<a href="javascript:">
<img src="${item.coverUrl}" height="62" width="110">
<span></span>
</a>
</li>
`)
//模拟点击
checkBg(0);
})
}
})
})
// 5.事件绑定
function checkBg(index) {
// console.log(index);
// 6.2清除定时器
clearInterval(timer);
// 按钮排他
$("#_j_mfw_focus ul.show-nav").children().eq(index).addClass("active").siblings().removeClass("active");
// 切换轮播图显示
$("#_j_mfw_focus ul.show-image").children().eq(index).show().siblings().hide();
// 6.3再次开启
// 6.4 index关联num
autoPlayFn(index)
}
// 6.自动轮播
var timer = null;
function autoPlayFn(num) {
var num = num;//累加器
timer = setInterval(function () {
// 6.1 边界判断
// if (num >= ($("#_j_mfw_focus ul.show-image").children().length - 1)) {
// num = 0
// console.log(num);
// } else {
// num++;
// }
// num在0--4之间轮转 1 2 3 4 0
num = ++num % $("#_j_mfw_focus ul.show-image").children().length;
// console.log(num);
checkBg(num);
}, 1000)
}
首页-游记列表
4.1、列表渲染
- 使用$.ajax调接口
- 处理数据
- 使用JQ方法改变DOM渲染
4.2、tab切换
- 传入不同的参数可以获取不同的数据列表
- 点击tab切换的时候,传入不同的参数
- 每次点击,都修改一次DOM
$('#_j_tn_nav ._j_gs_tab').click(function () {
$('#pagination [jp-role="page"]').eq(0).addClass('active')
.siblings('[jp-role="page"]').removeClass('active')
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings().removeClass('active')
if ($(this).index() == 0) {
getTravelList(2, 1)
} else {
getTravelList(1, 1)
}
}
})