jQuery笔记之 Ajax回调地狱
<style>
*{
padding: 0px;
margin:0px;
}
.tpl{
display: none;
}
.wrapper{
overflow: hidden;
border:2px solid black;
width:600px;
margin:100px auto 0px;
}
.movieSection{
float:left;
width:180px;
height:180px;
padding:10px;
}
.movieSection img{
width:100%;
height:150px;
cursor:pointer;
}
.movieSection h3{
height:30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="tpl">
<img src="">
<h3 class="movieName"></h3>
</div>
</div>
<!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>
* {
padding: 0px;
margin: 0px;
} .tpl {
display: none;
} .wrapper {
overflow: hidden;
border: 2px solid black;
width: 600px;
margin: 100px auto 0px;
} .movieSection {
float: left;
width: 180px;
height: 180px;
padding: 10px;
} .movieSection img {
width: 100%;
height: 150px;
cursor: pointer;
} .movieSection h3 {
height: 30px;
}
</style>
</head> <body>
<div class="wrapper">
<div class="tpl">
<img></img>
<h3 class="movieName"></h3>
</div>
</div>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<script> //模拟电影网站，判断用户是否为该网址的vip用户(最高权限为vip)
//如果vpi就展示出vip电影，点击相应的电影显示出该电影的详细介绍 //发送网络请求
$.ajax({
url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power', //向此服务器请求
type: 'POST', //获取数据类型
data: { //假设传入了账号密码，已经验证成功了。为了演示我们就不写input框来输入了
username: 'ypx',
password: '123'
},
success: function (res) { //请求成功后执行的函数
if (res.data.power == 'root') { //判断该用户是否为最高vip,如果是就返回出vip电影资源
//vip 网络地址发送请求
$.ajax({
url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
//正常开发中，数据不应该在这拿，
//应该在请求返回来的res中获取数据的，我们现在为了演示就在这里获取第二次数据了 type: 'GET',
success: function (res) {
var data = res.data; //声明一个变量为获取到的数据
var $Wrapper = $('.wrapper'); //获取wrapper准备存放数据
$.each(data, function (index, ele) { //循环所有数据里面的东西
//ele.name 数据里面的电影名称 ele.poster 数据里面的海报地址 var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
//把HTML结构的模板给克隆过来存放数据，再把模板的类名换成要放数据结构的类名 $MovieSection.data({ id: ele.id }).on('click', function () {//给获取数据加上id，添加点击事件
$.ajax({
url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo',
type: 'GET',
data: {
movieId: $(this).data('id') //点击谁this就指向谁
},
success: function (res) {
var data = res.data;
var direct = data.direct;
var gut = data.gut;
var mainActor = data.mainActor;
var screenWriter = data.screenwriter; var htmlStr = '<div class="mask">\
<p>导演: ' + direct + '</p>\
<p>剧情: ' + gut + '</p>\
<p>主演: ' + mainActor.reduce(function (prev, curv) {
prev += curv + ' ';
return prev;
}, '') + '</p>\
<p>编剧: ' + screenWriter.reduce(function (prev, curv) {
prev += curv + ' ';
return prev;
}, '') + '</p>\
</div>' $(htmlStr) //把数据结构加到body里面
.appendTo('body'); }
});
})
.children() //获取克隆后的模板结构下面的所有子元素
.eq(0) //选中元素中的第一个
.attr('src', ele.poster) //给属性加上数据中的海报
.next() //给下一个兄弟元素
.text(ele.name); //给文本加上数据中的电影名称
$Wrapper.append($MovieSection);//把MouseEvent填充到wrapper标签下面
});
}
})
} else {
//不是vip }
}
});
</script>
</body>
</html>
jQuery笔记之 Ajax回调地狱的更多相关文章
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- jQuery笔记之工具方法—Ajax 优化回调地狱
在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...
- jQuery 第十章 ajax 什么是回调地狱 优化回调地狱
回调地狱 什么是回调地狱,回调函数,一个嵌套着一个,到最后,缩略图成了 一个三角形, 造成了可阅读性差,可阅读性差就代表代码的可维护性 和 可迭代性差,最后还有一个就是可扩展性差. 也不符合设计模式的 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery:自学笔记(5)——Ajax
jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...
- 转： jquery中ajax回调函数使用this
原文地址:jquery中ajax回调函数使用this 写ajax请求的时候success中代码老是不能正常执行,找了半天原因.代码如下 $.ajax({type: 'GET', url: " ...
- jQuery学习笔记（Ajax）
jQuery对Ajax操作进行了封装,在jQuery中$.ajax方法属于最底层的方法,第2层是$.load().$.get().$.post()方法,第3层是$.getScript()和$.getJ ...
- javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式
我们先来看一下编写AJAX编码常常遇到的几个问题: 1.因为AJAX是异步的,全部依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套.ajax等异步操作越多,嵌套层次就会越 ...
- jQuery笔记——Ajax
Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式 ...
随机推荐
- 【转载】NULL，""，String.Empty三者在C#中的区别
(1)NULLnull 关键字是表示不引用任何对象的空引用的文字值.null 是引用类型变量的默认值.那么也只有引用型的变量可以为NULL,如果int i=null,的话,是不可以的,因为Int是值类 ...
- 网络请求--Retrofit2用法
欢迎Follow我的GitHub, 关注我的CSDN. Retrofit是Square开发的网络请求库, 简化了网络请求的使用, 这个库太知名了, 优点我就不多说了. 让我们看看怎样使用吧? 注意: ...
- 线程池ThreadPoolExecutor分析
线程池.线程池是什么,说究竟,线程池是处理多线程的一种形式,管理线程的创建,任务的运行,避免了无限创建新的线程带来的资源消耗,可以提高应用的性能.非常多相关操作都是离不开的线程池的,比方android ...
- Objective C运行时（runtime）技术总结，好强大的runtime
前言: Objective C的runtime技术功能非常强大,能够在运行时获取并修改类的各种信息,包括获取方法列表.属性列表.变量列表,修改方法.属性,增加方法,属性等等,本文对相 ...
- VUE清除组件内部定时器
定时器如果不手动清除,只会在离开当前页面或者F5刷新后才会清除.由于vue项目是SPA应用,离开当前组件后并不会清除定时器,所以需要我们手动去清除定时器.但当我们将清除定时器clearInterval ...
- Marlin固件之—：基础入门与測试
一.Marlin的简介 Marlin固件是一个3D打印的开源固件,3D打印固件有很多,Marlin最为健全和强大,当然相对也会复杂一些.使用Gcode控制爱.Gcode是数控机床等工控控制使用范围较广 ...
- IE8与vs2005冲突 添加MFC类向导错误解决方法—— internet explorer脚本错误
IE8 与 VS2005 冲突问题解决方法 问题表现为: MFC类向导添加类时,出现“当前页面的脚本发生错误”,进入MFC类向导后上方有一个小黄条“此网站的某个加载项运行失败.请检查"Int ...
- 2016/05/27 php上传文件常见问题总结
php上传文件常见问题总结 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-02-03我要评论 这篇文章主要介绍了php上传文件常见问题总结,基本上经常碰到的问题的处理都列了 ...
- GitExtensions 官方手册（英文）
在线版本(最新版):https://git-extensions-documentation.readthedocs.io/en/latest/ PDF版本(版本号 2.48):http://pan. ...
- lc.exe 已退出 代码为 -1
地址:http://jingyan.baidu.com/article/91f5db1bd0ace31c7f05e321.html