jquery高级 ajax

jquery高级

• 表单验证 同意协议和提交
• 冒泡事件 事件委托
• 节点操作 dom操作 一些方法
• js对象（字典）
• 最重要的！！！！！数据交互ajax，明白里面的参数

1.表单验证

都是两步：判断是否为空，是否匹配正则

同意协议

验证时间点，单击的时候

var $allow = $('#allow')
$allow.click(function(){
	if(){
	}else{
	}
})

提交 加锁概念

$myform.submit(function(){
	fnCheckSubmit()
})

function fnCheckSubmit(){
	//避免用户打开页面直接注册，定义开关变量flag，都为true才能提交
	if(){
	
	}
	else{
		return flase
	}
}

2.事件冒泡

是一种现象，bug；
父子级标签，且绑定相同事件：触发子级的命令会逐层向父层传递，逐层激活父集事件

但是如果不想点击子标签不激活父级事件可以在子集写return flase（也可以阻止表单提交的代码）

事件捕获是windows的规范，由外向内

事件委托/事件的代理.delegate

利用冒泡。子元素会激活父元素事件，把子元素的事件绑定到父元素上

委托给这个标签的父标签执行命令

delegate(事件真是发生在谁身上，事件属性，匿名函数写命令)

$('ul').delegate('li','click',function(){
	pass
})

事件委托作用：

1. 提高代码的执行效率 因为减少绑定次数
2. 给未来元素绑定命令，通过程序后加的标签

补充 on(事件属性，匿名函数绑定命令)也可以给未来元素绑定命令

3.DOM操作节点操作

DOM document object model 文档对象模型

dom js内置的一个结构化表现手法 通过这个，把所有的标签实现了一个倒置的树状结构图，为了精准查找标签，一层层的找

标记 == 标签 == 元素 <节点(标签，标签的属性，标签内容)

增加节点：

1. 声明变量保存节点标签数据
2. 使用追加函数将节点变量追加到相应的位置

var $li = $('<li>2222222</li>')//声明
$('ul').append($li)//追加

remove empty删除 $().remove()
append appendto在元素内部添加，从后面放入
prepend prependto在元素的内部，从前面添加
before insertBefore 在元素的外部，从前面添加
after insertAfter 在元素的外部，从后面添加

4.todolist demo

5.js的对象（字典）的创建使用

就是键值对

创建：(相比python用类实例化对象)

第一种Object实例化

//这里相当于基类是Object
var person1 = new Object()

person1.name = 'laowang'
person1.say = function(){
	alert(this.name)//可以用this
}
alert(person1.name)
person1.say()

第二种直接字典的形式定义

var xiaoming = {
	name:'xiaoming',
	age:10,
	say:function(){
		alert(this.age)//this指的是这个实例对象
	}
}
alert(xiaoming.name)
xiaoming.say()

Ajax 用到对象的使用
Vue 用到对象的创建方法

使用和python一样上面写到了

6.Ajax 数据交互

Ajax好处：异步（请求数据的同时可以发送数据到服务器），局部刷新(整个页面不刷新，只局部刷新，ajax可以自己发送http请求，不通过浏览器地址栏)

ajax不支持操作本地文件，不支持连接操作数据库 但是这两点都是为了安全

因为ajax不支持直接操作数据库，所以需要中间接口，就是我们用python写的接口，用json拼接数据，返回到前端；之后会有框架式flask，django开发接口

json 一种数据格式

前端取数据，显示数据，都是用json格式
本质就是字典 必须是双引号

json = {
	"name":[{"a":[{"b":"bbbbbbb"}]}],
	...
}
json.name[0].a[0].b

ajax实现股票系统

常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

$.ajax({
	//ajax的参数
	//请求数据的地址：url接口
	url:'/index_data',
	type:'get',
	dataType:'json',
	success:function(dat){
		// 得到数据，并在页面显示数据
		//dat是得到的数据
	},
	error:function(){
		alert('请求失败')
	}
})

  $.ajax({
            url:"/index_data",
            type:"get",
            dataType:"json",
            success:function (data) {
                console.log(data);
                var str = "<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr> "
                for( var i = 0;i<data.length;i++){

                    str+='<tr><td>'+ data[i].id+'</td><td>'+ data[i].code+'</td><td>'+ data[i].sname+'</td><td>'+ data[i].rate01+'</td><td>'+ data[i].rate02+'</td><td>'+ data[i].sname+'</td><td>'+ data[i].new_prize+'</td><td>'+ data[i].date+'</td><td><input type=\"button\" value=\"添加\" name=\"toAdd\"></td></tr>'

                }

                $(".table").html(str)

            },
            error:function (err) {
                console.log(err);
            }


        } )

ajax的别的写法

success和error一般不写在$.ajax({})里
在ajax外面写.done(function(){xxx}).fail(fail(){})链式编程

$.ajax({
	url:'/index_data',
	type:'get',
	dataType:'json',
})
.done(function(){
	//success
})
.fail(function(){
	//fail
})

另一个写法：$.ajax的简写方式

$.ajax可以简写成$.get或者$.post

$.get('/change_data',{'code'}:300268),
	function(){
		//success
	})

ajax实现股票系统关注、删除

未来元素的事件需要委托给父集
type,value,class自带的html属性都有自己的功能，允许自定义属性，完成功能这里自定义歌html属性：获取股票代码 遵循key=“value”

mycode=’"+dat[i].code+"’

prop访问修改自带html属性，attr访问修改自定义html属性

$.ajax({
	url:'/add_data',
	type:'get',
	dataType:'text',
	data:{'code':},
	success:function(data){
		console.log(data);
	},
	error:function(err){
		console.log(err)
	}
})

7.jsonp跨域请求

协议域名端口全部一样就是同源请求，之前的ajax就是同源请求
不同源请求 就是跨域 jsonp是json格式跨域请求，其实用的比较少了

原理是：通过script标签的src跨域请求

例如img标签天生就能src跨域请求别人的图片

ajax和jsonp同意封装到$.ajax中

$.ajax({
	url:'https://sug.so.360.cn/suggest',
	type:'get',
	dataType:'jsonp',
	data:{'word':'b'},
})
.done(function(){
	xxxx
})

跨域请求360数据

https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a

键盘按下事件 keydown 键盘松开事件 keyup

$('input').keyup(function(){
	var vals = $(this).val()
	$.ajax({
		url:'https://sug.so.360.cn/suggest',
		type:'get',
		dataType:'jsonp',
		data:{'word':vals}
	})
	.done(function(dat){
		for(var i=0;i<dat.s.length;i++){
			str += '<li>'+dat.s[i]+'</li>'
		}
		$('ul').html(str)
	})
})