ajax
//get post 两种方式 做 请求
get 主要是获取数据
post 提交数据
同一个路由地址 既可以是get请求也可以是post请求
一个路由对应一个函数
get请求
accept
mime
$.ajax({
url: 直接拼接到url http://www.baidu.com/s?wd=luffy&name=123,
type:'get',
//data是响应数据
success:function(data){
},
error:function(err){
console.log(err);
}
})
get参数是保存在url中
post参数是保存在页面的from data中
form data
注册的效果
username
pwd
file
$.ajax({
url:'http://www.baidu.com/s',
type:'post',
data:{
},
success:function(data){
},
error:function(){
}
})
写项目，先考虑数据格式。再去考虑前端和后端逻辑。
一、响应式页面-@media介绍
我们为什么要写自适应的页面（响应式页面）
众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，所以聪明的程序员开发了一种自适应写法，即一次开发，处处显示！这到底是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。
一般说m站，指的就是手机页面。
CSS3 的 @media 查询
定义和使用
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
用and比较多
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒体类型（mediaType ） 类型有很多，在这里不一一列出来了，只列出了常用的几个。
screen： 用于电脑屏幕，平板电脑，智能手机等。（最常用） speech 应用于屏幕阅读器等发声设备 媒体功能
media feature：
1.max-width:定义输出设备中的页面最大可见区域宽度（小于等于指向宽度，比如960）
2.min-width:定义输出设备中的页面最小可见区域宽度
开始编写响应式页面
准备工作1：设置Meta标签
首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
准备工作3：设置IE渲染方式
默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
ps:这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。
代码示例：
1、如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (min-width: 1170px) {
body {
background-color:lightblue;
}
}
从上面的代码可以看出，媒体类型是屏幕（screen），使用 一个 and 连接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的最大宽度 大于于等于 1170px 的时候，就应用花括号里面的样式。
2.如果文档宽度大于等于 992px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (min-width: 992px) {
body {
background-color:red;
}
}
3、当文档宽度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的时候显示的样式
@media screen and (min-width:768px) and (max-width:992px) {
/* CSS 代码 */
}
需要注意的是：
不要被 min-width 和 max-width 所迷惑，初学者很容易误以为 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度如果小于设置的值，就不会应用这个区块里的CSS样式，所以 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--设置IE渲染方式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容移动设备的展示效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> --> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } /*最小屏幕是1170px >=*/ @media screen and (min-width: 1170px){ body{ background-color: red; } } /*最小屏幕是992px,最大是1170px*/ @media screen and (min-width: 992px) and (max-width:1170px){ body{ background-color: green; } } /*低于992px的屏幕*/ @media screen and (max-width: 992px) { body{ background-color: yellow; } } </style> </head> <body> </body> </html>