jquery高级 ajax

亦凉 2021-06-26 16:06 387阅读 0赞

## 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][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)
    	})
    })

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