return false 阻止事件冒泡;阻止表单提交
delegate 事件委托,子级不方便做,委托给父级做,既能给已有的绑定事件,又能给未来元素绑定。
json要写字符串,这是格式
ajax每个国家的读法都不一样,听起来像知道就可以了。
ajax只是jq一个函数而已,用来做数据交互的。
我们就是为了做数据交互,才调用ajax。
ajax依赖于HTTP协议,去发送请求。
ajax是默认支持异步传输数据;
默认支持局部刷新/无刷新。
同步:低效的,一件一件事情的干。
异步:高效的,一次干多件事(ajax在发送数据的时候,也能接收数据)
ajax包含请求和发送两个概念。
ajax不支持连接数据库。(原因是ajax依赖HTTP协议,不同语言协议不同)解决办法就是数据接口(一套python程序而已: 创建数据连接,查询取数据,数据写入) -- 出一个接口文档给前端(前端不懂后端程序,把每个接口的描述信息完整给前端,才能数据交互:接口作用、地址、参数 – 是否需要发送数据,返回的数据模板)
ajax请求数据接口(不同语言连接数据库的程序),数据接口去向数据库请求数据,然后发送给ajax。
web.py框架应用程序就是由n多个接口组成的。
当公司分工很明确的时候,那么ajax前半段由前端做,数据接口和数据库由后端程序员做。
后端数据接口名是什么,必须清楚的告诉前端。前端和后端重叠的部分就是数据接口名,必须先协商好。为了将来请求不出错。如果没有协商的话,那么就在写完一个接口程序的时候就要写一个接口描述文档(数据接口的名字,作用,参数,返回的模板数据“要的是key名”)
前端里面的字典对象,想访问key的值的时候并不是中括号了,而是.点后面跟着key
数据显示都是一个逻辑,遍历数据,然后将模板中的数据替换掉。
工作中$.ajax()中只配置基本参数,success拿到ajax函数外面变成done(),error拿到ajax函数外面变成fail(),采用链式编程的写法,一直将done和fail写在后面打点即可。也可以直接回车换行,只是为了美观,逻辑没变。这样只是为了让ajax看的干净一点,然后便于维护一些而已。
get方式就是获取数据,get支持的url字符数最大是1024个,get发数据是直接在url地址后面发送
post方式就是发送数据,post支持的url字符数更多。post会打一个http包,然后再发送数据,更加的安全。
简写的方式中,code是发送的数据,是一个字典的形式,可以加多个数据,后面只有一个回调函数(是成功后的事件),不支持失败后的事件。如果工作中不介意这些,那么可以采用简写的方式。在简写的格式中要注意一个问题,那就是发送的数据类型是json要在括号里面末尾加上,用引号直接写json就可以了,如果不写的话,会显示变量为被定义。一定能要记住这一点。
接口文档里面的信息一定写全了,如果是返回值的格式没告诉前端,前端可以从后台调数据,凭经验判断。但是为了同事之间相处的更加的融洽,还是写的明明白白的。
允许自定义html属性,已完成自己需要的功能。满足k=‘xx’而且名称符合标识符规则。访问自定义html属性时用attr这个。和prop用法完全一样。
自己写ajax的时候一定要注意括号,比如done和fail是跟在ajax后面的括号,如果显示错误,很大可能是这个问题,练习的时候在这个地方多次出现问题,不报错,但是有部分功能不出效果。
项目中ajax很常用,但是用的时候很容易忘记。在项目开始之前,自己先复习一下ajax的参数和函数多看看,了解一下每个参数怎么用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页 - 个人选股系统 V5.87</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery-1.12.4.min.js"></script>
<!-- <script>
$(function(){
$.ajax({
// 配置ajax的参数
// url:'请求数据的接口地址'
url:'/index_data',
// type:请求方式
type:'get',
// dataType:返回的数据格式 html xml ***json text
dataType: 'json',
// data:{} 发送的数据
// success:请求成功之后要执行的命令 -- 回调函数
success: function(dat){
// 接收数据,显示数据
console.log(dat)
var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>';
// alert(dat)
// 遍历dat 一个表头 + 94个tr数据 -- 将这95个tr放到表格里面
for(var i=0;i<dat.length;i++)
{
// -1-- 字典对象里面的id值 00007 -- 字典里面的code值
str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code+'</td><td>'+ dat[i].sname+'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>';
}
$('.table').html( str )
},
// error 请求失败之后要执行的命令 -- 回调函数
error: function(){
alert('请求超时')
}
})
})
</script> -->
<!-- ajax函数内部工作中只配置基本参数,success拿到ajax函数的外面变成done(),error拿到ajax函数的外面变成fail() -->
<!-- <script>
$(function(){
$.ajax({
url:'/index_data',
type:'get',
dataType:'json'
})
.done(function(dat){
// 成功
var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>';
// alert(dat)
// 遍历dat 一个表头 + 94个tr数据 -- 将这95个tr放到表格里面
for(var i=0;i<dat.length;i++)
{
// -1-- 字典对象里面的id值 00007 -- 字典里面的code值
str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code+'</td><td>'+ dat[i].sname+'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>';
}
$('.table').html( str )
})
.fail(function(){
alert('请求失败')
})
})
</script> -->
<script>
$(function(){
$.get('/index_data', function(dat){
var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>';
// alert(dat)
// 遍历dat 一个表头 + 94个tr数据 -- 将这95个tr放到表格里面
for(var i=0;i<dat.length;i++)
{
// -1-- 字典对象里面的id值 00007 -- 字典里面的code值
str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code+'</td><td>'+ dat[i].sname+'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd" data-code="'+dat[i].code+'"></td></tr>';
}
$('.table').html( str )
}, 'json')
// 增加关注
// 添加按钮 单击,把股票code值发送到接口 -- 接口返回不要重复添加或关注成功文字
// $('input').click(function(){
// alert(1)
// })
$('.table').delegate('input', 'click', function(){
// alert(2)
// k="v" 自定义html属性的形式获取code值
// 访问自己这个input标签的data-code属性值即可
// prop只能访问控制w3c定义的html属性,自定义的用attr函数访问和控制,attr和prop的用法完全相同
// alert($(this).prop('data-code'))
// alert($(this).attr('data-code'))
var myCode = $(this).attr('data-code')
$.ajax({
url:'/add_data',
type:'get',
dataType:'text',
data:{code: myCode}
})
.done(function(dat){
alert(dat)
})
.fail(function(){
alert('请求超时')
})
})
})
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top ">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">选股系统</a>
</div>
<div class="collapse navbar-collapse" id="mymenu">
<ul class="nav navbar-nav">
<li class="active"><a href="">股票信息</a></li>
<li><a href="/center.html">个人中心</a></li>
</ul>
</div>
</div>
</div>
<div class="container" id="container">
<div class="container-fluid">
<table class="table table-hover">
<!-- <tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>
<tr><td>1</td><td>000007</td><td>全新好</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr> -->
</table>
</div>
</div>
</body>
</html>
$ajax({ajax的参数})
url:接口地址(因为不支持链接数据库,协议不一样,所以需要接口地址。)
type: 请求方式 get:url发送数据 post:打包http包
datatype: 返回的数据格式
success:成功
error:失败
***success 换成 done() error 换成 fail()
如果完成的ajax函数意愿type类型为get,化简写成$.get();如果意愿type类型是post,化简写成$.post();
参数1:url的值
参数2:发送数据的值 data
参数3:成功的回调函数
参数4:返回的数据格式
Vue.js是前端三大新框架之一,
中国人 尤雨溪 2014年研发出来的 --- vue不兼容低版本浏览器
vue注重数据,只要数据变化,页面视图随着数据的变化而变化。
jQuery能做的,vue也能做。
vue厉害的地方有数据处理、动画、组件(一个模块性的东西,有html有css有js,将这些封装到一起。)
vue-project是组件开发用到的,前端的叫做webpack,提到webpack等都是开发组件。这些都是前端用到的。
后端学习的重点在数据处理相关的。
MVC model(数据相关的) view(页面视图相关的) controller(控制器) -----Angular.js、React.js
MVVM model view viewmodel(数据和页面视图相关的隐形的控制变化) -----vue(修改数据或者页面视图的时候,不用担心出事,viewmodel帮我们处理。只需要控制好数据和页面视图,中间的所有处理是viewmodel相关的)
后端将vue当做函数库来用即可
vue.js 和vue.mini.js(用的到的)
mini做过压缩
开发的时候导入vue.js,因为有调试工具,但是在项目上线之前一定要换成mini
vue先导入
id名一般用app
vue的使用是从一个vue对象开始的
var vm = new Vue({
el:"xx",
data:{
str:'xx'
}
methods:{
function(){}
}
})
vm是前端常用的一个对象名,viewmodel,官方文档这么写的。
配置vue对象的参数
el:''---------查找标签element的缩写
data:{}---------vue对象的数据区域
vue对象的数据显示是从mustache语法开始的{{数据}}两个大括号之间一定不要有空格mustache只能显示一个数据,如果要再发送那么再写一个{{数据}}
记得写在前面的时候要写入口,但是vue没有入口函数。但是可以使用js的入口函数。
在工作中,项目定了用jq开发就不使用vue了。
工作中使用vue的时候,一般不写入口函数,而是把vue的代码粘贴到标签的后面,只要保证标签先执行就可以了。
如果vue中data有很多数据的处理情况:app中写标签,一个标签写一个{{数据}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<!-- 数据显示从mustache 开始 {{ 数据 }} -->
<div id="app">{{ str }}</div>
<script>
// window.onload = function(){
// vue的使用是从一个VUE对象开始的
var vm = new Vue({
// 配置vue对象的参数
// el:查找标签
el:'#app',
data:{
// vue对象的数据区域
str: 'hello world'
}
})
// }
</script>
</body>
</html>
vue控制了父级,就有权限控制这个父级的所有子级。
简单的运算mustache也支持
mustache还支持一些长的命令
mustache还可以输出三元表达式 三元运算符(简易版的if else)
三元表达式:条件?条件成立的命令:条件不成立的命令
三元运算符是js中的知识点,原生js就有
超链接中的href在vue中可以不写死具体的路径和网址。
vue控制html属性有两种写法:
1.v-bind:href=
2.:href=
注意上面的两种方式都是在href前面写
上面的是控制超链接,其他的所有的html属性都是如此
v-bind:属性
:属性
v-xxx 都代表指令(具有特殊功能的属性),v-bind是控制html属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<!-- vue控制了父级 就有权限控制这个父级的所有子级 -->
<div id="app">
<!-- {{ str }} {{ num }} -->
<div>{{ str }}</div>
<div>{{ num }}</div>
<p>{{ num + 1}}</p>
<p>{{ str.split('').reverse().join('') }}</p>
<!-- js:三元运算符 三元表达式 -- 简易版的if else -->
<!-- <div>{{ 条件?条件成立的命令:条件不成立的命令}}</div> -->
<div>{{ num==0?'等于0': '不等于0'}}</div>
<!-- v-bind v-xx 指令 具有特殊功能的命令 -->
<a v-bind:href="url1">超链接</a>
<a :href="url2">超链接2</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
str: 'abcdefg',
num:1,
url1:'http://www.taobao.com',
url2:'http://www.itcast.cn'
}
})
</script>
</body>
</html>
其实控制的是它属性值变化。js和jq都可以
v-bind:或者: 后面跟着class,动态的控制class
1.class取值可以为字典(字典里面是布尔型的数据)
2.class属性值可以传对象引用
3.class属性值还可以是数组
如果是字典:真实类名:布尔型数据,true添加类,false不添加类
data中,自定义类名:真实类名
4.数组里面还可以写三元运算符(最重要的)
:class="[三元运算符]"
条件成立加一个类,条件不成立来一个空类名
这种写法工作中最常用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 字典 对象 数组 *******数组里面写三元运算符 -->
<!-- 字典:真实类名:布尔型数据,true添加类,false则不添加类 -->
<div :class="{myclass1: bool1, myclass2: bool2}">1111111</div>
<div :class="myobject">2222</div>
<div :class="[isClass6, isClass7]">33333</div>
<div :class="[bool2?'daqiu':'dongxiao']">44444</div>
<div :class="[bool1?'banzhang':'']">55555</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
bool1:false,
bool2:true,
myobject:{
myclass4: true,
myclass5: false
},
// 自定义的key 真实类名
isClass6: 'class6',
isClass7: 'class7'
}
})
</script>
</body>
</html>
标签身上写事件
v-on:事件属性=“命令”
methods:{函数名:匿名函数}
this.属性名
或者对象名:属性
标签里调用上面的函数@事件属性="函数名()"
如果有参数必须写括号(就是函数名后面的括号)
v-on:事件属性=“”
@事件属性=“”
当前对象添加一个参数
methods:{
函数名: 匿名函数
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>{{ num }}</div>
<button v-on:click="num+= 1">按钮</button>
<!-- 如果有参数必须加() -->
<button @click="fnAdd()">按钮调用函数</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods:{
// 函数区域
// 函数名: 匿名函数
fnAdd: function(){
// num自增1 this.xx duixiang.shux
this.num += 1
}
}
})
</script>
</body>
</html>
事件冒泡是浏览器的DOM树问题,vue也有事件冒泡。
vue阻止事件冒泡的方法,在事件属性后面加stop属性@事件属性.stop
vue阻止表单提交:在事件属性后面加.prevent=""
工作中有人可能使用的是@submit.stop.prevent=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
width: 200px;
height: 200px;
background: green;
}
.son{
width: 100px;
height: 100px;
background: pink;
}
</style>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="father" v-on:click="fnAdd">
<!-- vue阻止事件冒泡:在事件属性后面加stop属性 -->
<div class="son" @click.stop.prevent="fnAdd">{{ num }}</div>
<!-- @submit.prevent="" -->
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num: 1
},
methods:{
fnAdd: function(){
vm.num ++
}
}
})
</script>
</body>
</html>