day23对象、AJAX

最新推荐文章于 2024-04-23 00:37:13 发布
最新推荐文章于 2024-04-23 00:37:13 发布
阅读量72 收藏
点赞数
文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45637649/article/details/114946472
版权

文章目录

动画

show hide toggle

show: 显示 hide: 隐藏 toggle: 有就隐藏 没有就显示

show/hide/toggle(speed, easing, callback)

width + height + opacity

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

// $('div').eq(0).hide(2000, 'linear', function(){
//     console.log('结束了');
//     $(this).show(1000, 'linear');
// });
// $('div').eq(1).hide(2000, 'swing');

$(document).click(function(){
    $('div').eq(0).toggle(1000, 'swing');
});

slide

slideDown: 显示 slideUp: 隐藏 slideToggle: 有就隐藏 没有就显示

slideDown/slideUp/slideToggle(speed, easing, callback)

height

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

无参数的时候 有动画效果

// $('div').eq(0).slideUp(2000, 'linear', function(){
//     console.log('结束了');
//     $(this).slideDown(2000);
// });
// $('div').eq(1).slideUp(2000, 'swing');
$(document).click(function(){
    $('div').slideToggle(2000);
});

fade

fadeIn: 显示 fadeOut: 隐藏 fadeToggle: 有就隐藏 没有就显示

fadeIn/fadeOut/fadeToggle(speed, easing, callback)

opacity

speed: 动画时间 ms

easing: linear swing

callback: 回调函数

无参数的时候 有动画效果

fadeTo: 改变到某个透明度

fadeTo(speed, opacity, easing, callback)

// $('div').eq(0).fadeOut(2000, 'linear', function(){
//     // console.log('结束了');
//     $(this).fadeIn(2000);
// });
// $('div').eq(1).fadeOut(2000, 'swing');

$(document).click(function(){
    // $('div').fadeToggle(2000);
    $('div').fadeTo(2000, 0.1, 'linear', function(){
        console.log('结束了'); // 有几个元素执行动画 就会有几个回调函数执行
    });
});

animate

$对象.animate(params, speed, easing, callback);

params: 要改变的属性和对应的目标值 {}

常用

// $('div').eq(0).animate({
//     'width': 500,
//     height: 500,
//     margin: 100,
//     opacity: .5
// }, 3000, 'swing', function(){
//     console.log('结束');
// }).animate({
//     borderWidth: 30 
// }, 3000, 'swing', function(){
//     console.log('结束');
// });
jq对象.animate(params, options);

duration: 时长 ms

easing: 运动曲线 linear swing

complete: 动画执行结束后的回调函数

step: 每一步动画执行后的回调函数

queue: 是否队列, true–进入队列 false—不进入队列

$('div').eq(0).animate({
    'width': 500,
    height: 100
}, {
    duration: 3000,
    easing: 'linear',
    complete: function(){
        console.log('结束');
    },
    step: function(){
        console.log($(this).width());
    },
    queue: true
}).animate({
    borderWidth: 100
},{
    duration: 1000,
    queue: false
});

队列

  1. 动画连缀的时候 动画默认自动加入队列

  2. 可以直接使用show hide toggle

  3. .css设置样式 不属于动画 不会进入动画队列 跟随第一个动画再开始的一瞬间执行完成

  4. 手动添加队列

    jq对象.queue(函数) 手动加入队列之后 后续的动画不执行

/* 
    1. 动画连缀的时候  动画默认自动加入队列
*/
// $('div').eq(0).animate({
//     'width': 500
// }).animate({
//     'width': 100
// });

// 2. 可以直接使用show  hide  toggle
// $('div').eq(0).animate({
//     'width': 'hide'
// }, 2000).animate({
//     'width': 'show'
// }, 2000).animate({
//     width: '+=150'
// });

// 3. .css设置样式 不属于动画 不会进入动画队列 跟随第一个动画再开始的一瞬间执行完成
// $('div').eq(0).animate({
//     width: 1000
// }).animate({
//     height: 1000
// }).css('background', 'green').animate({
//     borderWidth: 100
// });

// 4. 手动添加队列 
// jq对象.queue(函数)  手动加入队列之后 后续的动画不执行
$('div').eq(0).animate({
    width: 1000
}).animate({
    height: 1000
}).queue(function(next){ // 形参: 是一个函数 函数调用 后续动画继续执行
    $(this).css('background', 'green');
    console.log(next);
    next();
}).animate({
    borderWidth: 100
});

is

is: is(‘选择器’) 是否符合选择器

console.log($('div').is(':animated'));
$('div').animate({
    'width': 1000
}, {
    step: function () {
        console.log($(this).is(':animated'));
    },
    complete: function () {
        console.log($(this).is(':animated'));
    }
});

// 点击页面的时候 如果div没有动画  开始动画 如果有 不添加动画
$(document).click(function () {
    if ($('div').is(':animated') == false) {
        // 添加动画
        $('div').animate({
            'height': 'toggle'
        }, 5000);
    }
});

stop

jq对象.stop(clearQueue, toEnd);

​ clearQueue: 是否清除队列 如果设置成true 表示清除队列 设置成false 不清除队列 执行下一个动画

​ toEnd: 是否到达结束值 如果设置成true 表示一瞬间到达结束值 如果设置成false 不到达结束值

$('button').eq(0).click(function () {
    // 添加动画
    $('div').animate({
        'height': 'toggle'
    }, 50000).animate({
        'width': 1000
    }, 20000);
});

/* 
    jq对象.stop(clearQueue, toEnd);
    clearQueue: 是否清除队列  如果设置成true  表示清除队列  设置成false 不清除队列 执行下一个动画
    toEnd: 是否到达结束值   如果设置成true  表示一瞬间到达结束值  如果设置成false  不到达结束值
*/
$('button').eq(1).click(function(){
    // $('div').stop(); // undefined----false undefined----false
    // $('div').stop(true, false); // 清除队列   不到达结束值
    // $('div').stop(true, true); // 清除队列   瞬间到达结束值
});

finish

jq对象.finish();
结束所有动画 并且到达目标值

$('button').eq(1).click(function(){
    $('div').finish();
});

delay

jq对象.delay(时间); ms

​ 上一个动画结束之后 等待多长时间执行下一个动画

$('button').eq(0).click(function () {
    // 添加动画
    $('div').animate({
        'height': 1000
    }, 500).delay(5000).animate({
        'width': 1000
    }, 20000);
});

AJAX

优缺点

优点:

​ \1. 不需要插件支持

​ \2. 良好的用户体验

​ \3. 少量的数据交互 web服务器的压力较小

​ \4. 减小带宽和服务器的压力

缺点:

​ \1. 破坏前进、后退按钮

​ \2. 对搜索引擎的支持不足

$.ajax

$.ajax();

​ url: 请求地址, 必传

​ data: 请求参数,

​ type: 请求方式, 默认值get

​ success: 请求成功的回调函数,

​ error: 请求失败的回调函数,

​ complete: 请求完成的回调函数,

​ dataType: 期望的返回数据的类型: xml\html\script\json\jsonp

​ cache: 是否缓存

​ timeout: 超时毫秒数

$.ajax({
    // url: 'https://easy-mock.com/mock/5ac31804c0c390592291124f/take/goods#!method=get',
    // url: 'a.txt',
    url: '../day21/jquery-3.6.0.min.js',
    // url: 'b.json',
    // url: 'c.json',
    success: function(res){ // 返回请求成功的数据   已经解析完成
        console.log(res);
    },
    error: function(aja){
        console.log(aja); // ajax对象
    },
    complete: function(aja){
        console.log(aja); // ajax对象
    },
    // type: 'post',
    cache: true,
    // timeout: 1,
    // dataType: 'script'
});

$.get

$.get(url, data, callback)

// $.get('b.json', function(res){
$.get('c.json', function(res){
    console.log(res);
});

$.post

// $.post('b.json', function(res){
$.post('c.json', function(res){
    console.log(res);
});

跨域

同源: 同服务器+同端口号

同源策略

跨域: js对于同源策略的限制

跨域:

​ 不同服务器 tmall jd

​ 同一个服务器 不同端口 5500 8080

​ 同一服务器 不同协议 http https file

报错:

​ has been blocked by CORS policy

jsonp: json with padding

原理: 动态的向页面中添加script标签, 将src设置成要请求的数据的地址, 利用回调函数接收返回值

function aa(res) {
    console.log(res);
}
$.ajax({
    'url': 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1',
    'dataType': 'jsonp', // 解决跨域
    'jsonpCallback': 'aa', // 只能是字符串
    'success': function (res) {
        console.log(res);
    },
    'error': function (err) {
        console.log(err);
    }
})

原理

<button>请求数据</button>
<script src="../day21/jquery-3.6.0.js"></script>

<script>
  /* 
      同源: 同服务器+同端口号
      同源策略
      跨域: js对于同源策略的限制
      跨域:
          不同服务器  tmall  jd
          同一个服务器 不同端口  5500  8080
          同一服务器 不同协议  http https file
      报错: 
          has been blocked by CORS policy
      jsonp: json with padding

      原理: 动态的向页面中添加script标签, 将src设置成要请求的数据的地址, 利用回调函数接收返回值
  */
  var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';

  /* 
      src
  */ 

  // 声明一个函数 来接收后台返回的数据
  function sd(res){
      console.log(1, res);
  }

  // 点击页面按钮 请求数据
  $('button').click(function(){
      // 用script标签请求数据 先创建script标签
      var sc = $('<script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=sd"><\/script>');
      // 追加到页面
      $('body').append(sc);
  });
</script>
<!-- src设置成要请求数据的地址 -->
<!-- <script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=sd"></script> -->

注意: jsonp只支持get请求，设置post也会被变成get

数据序列化

$(‘form’).serialize();

$(‘form’).serializeArray();

// 有独立单个数据
var str = $('form').serialize(); // name值=value值&name值=value值
console.log(str);

// 多个重复性数据 属性名都一样的时候
var arr = $('form').serializeArray(); 
console.log(arr);
console.log(JSON.stringify(arr));
/* 
    [{
        name: a,
        value: 123
    }, {
        name: b,
        value: 123456
    }]
*/
WEB-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery的ajax发送FormData的方式
01-23
url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { console.log(data); }, processData : false, contentType : false }); }); [removed] </body> </html>
python学习day06.txt
05-05
Day05回顾 1、json模块 1、json.loads() json格式(对象、数组) -> Python(字典、列表) 2、json.dumps() Python(字典、元组、列表) -> json(对象、数组) 2、Ajax动态加载 1、抓包工具抓参数 ：WebForms -> ...
Jquery 随便写些知识点
weixin_33725272的博客
12-21 69
针对jQuery随便写些觉得还挺实用的一些东西，也没系统的去理一番，只是想到哪写到哪，写的不完全也请多见谅。 jQuery和其他javascript库产生$符号冲突了？$符号想必用jQuery的人都不生疏，$即代表着jQuery函数。然而$符号并不是jQuery私有的一个符号，其他javascript库也可以使用$符号作为他们的主函数。那么，当我们用的其他的库与jQuery库发生$符号冲突时该怎...
day02_Ajax
Fufufusm的博客
07-04 98
ajax工作原理 浏览器端： 发生某个事件，创建XMLHttpRequest对象，发送HttpRequest 服务器端： 处理HttpRequest，创建响应并将数据返回给浏览器 浏览器端： 使用js处理被返回的数据，更新页面内容 XHR 创建对象 xmlHttpRequest 用于与服务器交换数据（xmlhttp=new XMLHttpRequest();） 请求 method： GET： 更简单，大部分情况都适用 POST： 1.无法使用缓存文件（更新服务器上的文
day03.ajax
m0_50617506的博客
01-15 406
1.正则 replace 函数用法 例子: 'dasdawdqdac'.replace(/[a]/,()=>{ ​ return 'h' // ​ }) //dhsdawdqdac 函数中可以跟参数 (a,b,c,d)=>{ } 第一个值 a:匹配到的内容 第二个值 b:分组中的内容 第三个值 c:匹配到的内容在字符串中的索引号 第四个值: d:原字符串 3.XMLHttpRequest 3.1使用xhr发送GET请求 1...
Day 61 Ajax
Tao.的博客
09-07 272
ajax
day21 - Ajax
weixin_45274291的博客
06-29 369
Ajax就是在不刷新页面的情况下发送http请求 Ajax，全称：async javascript and XML，是一个异步执行和后台交互的技术（异步的JavaScript和XML） 1.ajax的get请求 （1）创建ajax对象 let ajax= new XMLHttpRequest( ); let ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容ie678 let ajax = new ActiveXObject("Msxml2.XMLHTT
day03_JavaScript预习笔记1
08-04
1.JavaScript 加强，涉及到 ECMAScript 语法、BOM 对象、DOM 对象以及事件 2.Ajax 传统编程 3.jQuery 框架，九种选择
Intermediate-JavaScript-Two-Day:这是为期两天的中级 JavaScript 课程的课程表
06-11
#中级 JavaScript ### DOM 选择 内部HTML 使用属性 处理事件 ### AJAX 使用对象和数组 使用 Handlebars 的前端模板 将事件与动态数据相结合
简单了解Ajax
pythontxt的博客
04-19 1017
Ajax，全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建更好更快以及交互性更强的网页应用的技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这意味着，用户可以在不中断当前操作的情况下，获取新的数据或提交表单，从而提供了更流畅的用户体验。异步的JavaScript它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。
AJAX——图书管理案例
weixin_48719464的博客
04-20 681
自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查。
2024-04-22(AJAX)
cxr的博客
04-22 920
使用浏览器的XMLHttpRequest对象和服务器进行通信浏览器网页中，使用Ajax技术（XMLHttpRequest对象）发起获取服务器数据的请求，服务器将数据给前端，前端拿到数据后，展示到网页。事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
AJAX——封装_简易axios
weixin_48719464的博客
04-22 1000
需求：基于Promise + XHR 封装 myAxios函数，获取省份列表展示步骤：1.定义 myAxios函数，接收配置对象，返回Promise对象2.发起XHR请求，默认请求方法为GET3.调用成功/失败的处理程序4.使用myAxios函数，获取省份列表展示。
009 springboot整合mybatis-plus 增删改查 ajax 登录退出accessToken
m0_46695127的博客
04-18 1072
009 springboot整合mybatis-plus 增删改查 ajax 登录退出accessToken
【Ajax-异步刷新技术】什么是Ajax之续章 !
m0_74187147的博客
04-23 965
同步请求：客户端向服务器端发送一个请求后，必须等待请求的处理结果返回来以后，才可以向服务器发送下一个请求。翻译：想服务器发送的上一个请求还没有结束，就不能继续向服务器发送新的请求；异步请求：客户端向服务器发送请求后，不论服务器的响应结果是否返回，都可以继续向服务器发送新的请求。异步请求的性能会比同步请求更好。
AJAX——案例_天气预报
weixin_48719464的博客
04-22 283
my-axios.js代码。index.css代码。index.html代码。reset.css代码。search.js代码。index.js代码。
AJAX——Promise-链式调用
weixin_48719464的博客
04-23 547
概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，知道结束细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果好处：通过链式调用，解决回调函数嵌套问题。
基于java的-28-“智慧食堂”设计与实现--LW-源码.zip
最新发布
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
ajax 天气预报
12-16
以下是一个使用Ajax获取天气预报信息的示例代码： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方法和请求地址 xhr.open('GET', '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值