饥人谷_李栋
1.基本概念
2.动词get 和 post 区别
3.服务器 请求、响应过程
4.form表单的默认提交动作
5.lablel、input 关联
6.取form的name.value的方法
7.post提交
8.实例
一、基本概念
- 请求（request） 响应(response)
请求行 =动词 路径 版本
请求头 =名字 ：value
空行
消息体（包体）
二、动词get 和 post 区别
1) 触发方式不同
->触发get
- 地址栏输入url
- img src=...> <script src=...>
- 请求外部css文件
- $.get()
-> 触发post//是非幂等的
- <from>提交
- $.post()
// $.post(url,date,success,dataType)
2) get 无body；post有body（空行+消息体）
3) 语义不同
get读资源 post 写资源
//http协议没规定，是很多server软件看到get 不去读它的body，so..
三、服务器 请求、响应过程
//以koa为例Koajs application starter template
- 路由 请求路径的时候 调用index方法
- index方法渲染index.hbs文件
- index.hbs文件的内容会作为响应返回给浏览器
//可以这么理解：
- 看你请求那个路径，
- 根据路径调用方法
- 方法渲染html文件
四、form表单的默认提交动作
- 如果form表单里面有 type=“submit”
- 当我们在任意一个input里面点 回车/ 提交 按钮的时候
- 会把input里面所有含有 name的value收集起来组成字符串
//post请求会把所有name收集起来 （以name1:xx&name2:xx的形式） 放到消息体里面
//post响应会拿到所有name 然后渲染html
//form 的get请求把所有name收集起来（以?name1:xx&name2:xx的形式）放到查询参数里面
五、内容、input 关联
1.普通用法
<lable for='input1'>内容：</lable><input id='input1' type='text' name='name1'>
//效果 点lable input就获得焦点了
2.快捷方式
<lable>
内容：<input type='text' name='name1'>
</lable>
六、取form的name.value的方法
$('form').on('submit',function(){
var form=this//dom
console.log(form.phone.value)
})
七、post提交
$.post(url,数据，成功后的callback)
url可以是：'/post2' '/' form.action
数据可以是： object({xxx:yyy,xx:yy}) string
成功后的回调: function(response){xxx}
//只有成功提交，错误的提交需要用到ajax方法
//response可能是对象或字符串，
//jason的话-> 服务器会变成jason，所以对象里面的key和value都是服务器决定的
//字符串 -> 返回字符串
ajax方法
$.ajax({
type: "POST",
url: url,
data: data,
success: callback,
error：callback,
dataType: dataType
});
八、实例
老规矩上具体实例
//index.hbs
//方法一
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$('form').on('submit', function(event){
event.preventDefault()//阻止默认事件
var form=this
var name=form.name.value
var phone=form.phone.value//收集字符串key、value
$.post('/',{
name:name,
phone:phone//name=xingkongs&phone=123
},)//构造post请求
})
//方法二：
$.ajax({
type: "POST",
url: xxxx,
data: {
name:name,
phone:phone
},
success: function(response){
console.log(response)
var name=response.name4
var phone=response.phone4//这里的phone4就是服务器定的
alert('姓名：'+name+'\n手机：'+phone)
},
error：function(){
alert('服务器出错了！')
},
dataType: dataType
});
</script>
koa服务器端代码
//controllers/index.js
module.exports = {
post: function *(next) {
var name = this.request.body.name
var phone = this.request.body.phone//获取post请求的值
// yield this.render('post.hbs', {
// name4: name,
// phone4: phone
// });
this.body={
name4:name,
phone4:phone//服务器定义response的key、value
}
yield next;
}
}
路由部分代码
module.exports = function(app) {
var Router = require('koa-router'),
indexCtrl = require('../controllers/index');
var router = new Router();
router
.get('/', indexCtrl.index)
.get('/2', indexCtrl.index2)
.get('/3', indexCtrl.index3)
.post('/', indexCtrl.post)
.post('/post2', indexCtrl.post2)
.post('/post3', indexCtrl.index3)
app.use(router.middleware());
};
