jQuery的阻止
<style>
.box{
width: 400px;
height: 400px;
background: pink;
}
.middle{
width: 300px;
height: 300px;
background: skyblue;
}
.inner{
width: 200px;
height: 200px;
background: orange;
}
</style>
</head>
<body>
<!-- <div class="box">
<div class="middle">
<div class="inner"></div>
</div>
</div> -->
<form action="./01_复习.html">
账号: <input type="text"><br>
<button>提交</button>
</form>
<script src="./jquery.min.js"></script>
<script>
// 阻止冒泡事件和阻止默认事件的执行
// 冒泡事件
// 子级标签触发事件,会同时触发,父级标签上,相同类型的事件
// jquery中,阻止冒泡事件,是不需要考虑兼容的
// 直接给标签事件处理函数添加参数,也就是 事件对象
// 事件对象.stopPropagation();
// 阻止默认事件的执行
// 直接给标签事件处理函数添加参数,也就是 事件对象
// 事件对象.preventDefault();
// 在 jQuery中 还有一种方式
// return false 可以阻止一切,包括 冒泡 和 默认 事件的执行
// 但是要注意, return false 会阻止其他程序的执行,必须要放在合理的位置上
/*
$('.box').click(function(e){
// 阻止冒泡事件
e.stopPropagation();
console.log('您点击是的box,div')
})
$('.middle').click(function(e){
// 阻止冒泡事件
e.stopPropagation();
console.log('您点击是的middle,div')
})
$('.inner').click(function(e){
// 阻止冒泡事件
e.stopPropagation();
console.log('您点击是的middle,div')
})
*/
// 例如,form表单的submit事件
// $('form').submit(function(e){
// let nameVal = $('input').val();
// if(nameVal !== '张三'){
// // 阻止表单的默认提交事件
// e.preventDefault();
// }
// })
// 实际项目中,如果使用form发送 ajax请求
// 必须添加阻止默认事件执行
$('form').submit(function(e){
// 如果是发送ajax请求,即时写了return阻止了函数的执行
// 但是form表单有默认的提交事件,也会执行提交
// 必须先阻止默认事件的执行
e.preventDefault();
// 如果账号密码正确,会发送ajax请求
let nameVal = $('input').val();
if( nameVal !== '张三' ){
// 如果账号不是张三,就执行return,总之发送请求
return;
}
// const xhr = new XMLHttpRequest()
// xhr.open(...)
// xhr.send()
// xhr.onload = function(){}
})
</script>
jQuery中封装ajax请求
<body>
<!--
在 jQuery中 给我们封装了 ajax请求
不用考虑 兼容,跨域等问题, jQuery全都给我们解决了
只需要在设定请求时,设定不同的参数,就可以完成不同的请求
jQuery中 封装的 ajax请求 有3种
1, $.get() get请求方式
参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
参数的形式是对象形式
$.get({
url : 地址(必填)
data : 携带的参数 对象形式
dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
success : function(){} 请求成功时执行的函数
})
2, $.post() post请求方式
参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
参数的形式是对象形式
$.post({
url : 地址(必填)
data : 携带的参数 对象形式
dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
success : function(){} 请求成功时执行的函数
})
3, $.ajax() 综合方式
参数有 N 个参数,特别特别多,逐一介绍
常规get,post请求(不是跨域),常用参数
$.ajax({
常用:
url : 地址;
type / method : 请求方式 默认值是get方式
data : { } 传参参数,必须是对象形式
dataType : json, 设定为json,会自动解析反应提中的json串
success : function(){} 请求成功执行的函数
不常用:
async : 设定是否异步,默认值是true,异步执行ajax请求
error : function(){} 请求错误时执行的函数
请求成功时不会执行
timeout : 设定时间,单位 毫秒
如果请求时间超过设定的时间,认为是请求失败
必须是异步执行
cache : 设定是否缓存请求结果
默认值是 true,缓存请求结果
必须是get方式,这个设定才起作用
post方式不会缓存,设定也没有效果
context : 指定 执行函数中 this的指向
})
问题: 注意语法
之前是 $().方法() 是标签对象的方法
现在是 $.方法() 是jQuery自己本身的方法
-->
</body>
使用 jQuery 封装的 ajax 请求 完成跨域
<!--
使用 jQuery 封装的 ajax 请求 完成跨域
1, 代理方式
必须是高版本的jQuery
设定好 服务器代理
定义好请求方式
get方式参数设定在url地址中
post方式参数设定在 data中
2, jsonp方式
支持 jsonp方式,完成跨域请求
回顾:
先定义一个函数
在PHP中 输出字符串,字符串内容是调用函数,并且定义参数 echo '函数名称(数据参数)'
在js当中,就等于是 执行这个函数
封装的ajax
url : 地址是一个跨域地址
dataType : 必须是 jsonp
jsonp : 设定函数名称,默认是callback
php中:
echo 的内容是字符串拼接形式
echo "$函数名称变量(" . json_encode($返回数据) . ")";
函数名称 存储在变量中,使用 " " 双引号解析
返回的数据,必须是 json串格式 , 使用 json_encode() 转化,拼接在 函数的参数位置中
实际项目中,跨域请求的往往是 其他服务器提供的数据接口
接口 : 是服务器提供的,外部访问数据的一个窗口
外部请求,使用指定的方法,可以通过接口来获取服务器中的相关的数据
通过发送不同的函数名称,后端程序调用不同的函数,传参不同参数,前端获取不同的数据
端口 : 是计算机内部的硬件设定
运行在计算机中的软件程序,必须通过不同的端口,来调用计算机的硬件设置
如果一个软件定义一个端口,之后其他的软件,再定义这个端口,就会执行失败,无法运行程序
所谓端口,就是软件程序,执行的通道,执行的位置
-->
实例get
<body>
<h1>get请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
$('button').click(function(){
$.get({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求时携带参数,参数以对象形式定义
data : {name:'张三' , pwd:123456},
// 没有设定 dataType 参数,res中的响应体
// 后端给什么,res中,就存储什么
// 设定 dataType : 'json', 会自动解析响应体json串
dataType : 'json',
// 请求成功时,执行的函数
// 函数的参数,存储响应体
// 自定义形参 res 中 存储的就是响应体
success : function(res){
console.log(res)
}
})
})
</script>
</body>
实例post
<body>
<h1>post请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
$('button').click(function(){
$.post({
// 对 url 地址的PHP文件发起请求
url : './post.php',
// 请求时携带参数,参数以对象形式定义
data : {name:'张三' , pwd:123456},
// 没有设定 dataType 参数,res中的响应体
// 后端给什么,res中,就存储什么
// 设定 dataType : 'json', 会自动解析响应体json串
dataType : 'json',
// 请求成功时,执行的函数
// 函数的参数,存储响应体
// 自定义形参 res 中 存储的就是响应体
success : function(res){
console.log(res)
}
})
})
</script>
</body>
实例ajax
<body>
<h1>ajax请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
const obj = {};
$('button').click(function(){
$.ajax({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求方式,不写就是,默认值get.
type: 'get',
// data传参参数
data : {name:'张三',pwd:123456},
// dataType, 设定 json 解析响应体的json串
dataType : 'json',
success : function(res){
console.log(res);
console.log(this);
},
// 不常用的
// async : false, // 设定异步
// 请求成功不执行,请求失败才执行
error : function(res){
console.log(res)
},
// timeout : 1, // 超市报错,但是必须是异步执行
cache : false, // 如果是不缓存,会在数据后有一个 _数值 的时间戳
// 告诉程序,这个结果的获取时间
context : obj , // this默认指向 ajax对象 , 可以设定this的指向
})
console.log('我是同步执行的程序');
})
</script>
</body>
ajax跨域
<body>
<h1>跨域请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
// 应该是提前准备一个函数,但是现在jQuery帮我们准备好了,我们不用自己写了
// function fun(value){
// console.log(value);
// }
$('button').click(function(){
// 代理方式跨域,高版本支持
// 配置好代理,定义好传参方式,就可以完成代理,请求跨域
// $.ajax({
// url : '/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E7%BE%8E%E9%A3%9F%E8%8F%9C%E8%B0%B1&start=0&_=1587714668214',
// type : 'get',
// // data : {name:'张三',pwd:123456},
// // dataType : 'json',
// success : function(res){
// console.log(res);
// }
// })
// jsonp方式
// 在执行跨域时
// 1, 必须要设定 dataType 为 jsonp,才能完成跨域
// 2, 我们手写 jsonp 方式,要先定义一个函数
// 先jQuery给我们准备好了,一个函数,默认的名称是 callback
// 可以通过 jsonp 属性 来定义 这个函数的名称
// 这里影响的是PHP的操作
$.ajax({
url : 'http://localhost/nz2002/week8_day04/01_jQuery_ajax/jsonp.php',
type : 'get',
data : {name:'张三',pwd:123456},
dataType : 'jsonp', // jsonp 跨域请求专门的参数
jsonp : 'fun', // 定义函数名称为 fun , 不写默认名称是 callback
success : function(res){
console.log(res);
}
})
})
</script>
</body>
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
