Web开发相关笔记 #02#
【1】
HTML 插入第三方。
【2】
【3】
JavaScript 回调函数 & 模块化 --> 用变量封装数据、方法 --> 类比 Java 中的 package
var fetchLive = function(callback) {
$.ajax({
url: "live/list.do",
method: 'GET',
success: function (data) {
callback(data);
}
});
}; var liveDisplay = {
homepage: function(data) {
console.log(data);
var liveName = $('.telecast-title');
var liveStatus = $('.live-status');
var liveTime = $('.telecast-time');
var liveHref = $('.live-href');
const DISPLAY_NUM = (data.length < 4 ? data.length : 4);
for (var i = 0; i != DISPLAY_NUM; ++i) {
$(liveName[i]).text(data[i].name);
$(liveStatus[i]).text(data[i].status);
$(liveTime[i]).text(data[i].lastTime);
liveHref[i].href = data[i].link;
}
}
}; $(function () {
fetchLive(liveDisplay.homepage);
});
示例 02:
/**
* 分类展示课程
*/ const BASE_URL = "course/listbyid.do?categoryID="; var fetchCourseById = function(id, callback) {
$.ajax({
url: BASE_URL + id,
method: 'GET',
success: function (data) {
callback(data);
}
});
}; var displayCourse = {
frameA: function(courses) { // 首页页面展示1
var courseName = $('.recommended-course-name');
var courseNum = $('.recommended-course-number');
var coursePic = $('.recommended-course-picture'); const DISPLAY_NUM = (courses.length < 6 ? courses.length : 6);
for (var i = 0; i != DISPLAY_NUM; ++i) {
$(courseName[i]).text(courses[i].title);
$(courseNum[i]).text(courses[i].lessonNum);
coursePic[i].src = courses[i].picture;
}
}, frameB: function(courses) { // 首页页面展示2
var courseName = $('.free-course-name');
var courseNum = $('.free-course-lessionNum');
var coursePic = $('.free-course-logo');
var courseHref = $('.btn-study'); const DISPLAY_NUM = (courses.length < 8 ? courses.length : 8);
for (var i = 0; i != DISPLAY_NUM; ++i) {
$(courseName[i]).text(courses[i].title);
$(courseNum[i]).text(courses[i].lessonNum);
coursePic[i].src = courses[i].picture;
courseHref[i].href = 'toPcLivePlay.do?source=' + courses[i].rtmp;
}
}
} $(function () {
fetchCourseById(2, displayCourse.frameA);
fetchCourseById(1, displayCourse.frameB);
});
【4】
distpicker,不要遗漏
trigger
/*
* per-set
* 展示、修改用户信息。
* */
var getSexVal = function() {
var temp =$(".sex");
for (var i = 0; i != 3; ++i) {
if (temp[i].checked) return i;
}
return 0;
}; var lastTotalVal;
var getTotalVal = function() {
var temp = $("#user-val1").val()
+ $("#user-val2").val()
+ $("#user-val3").val()
+ $("#user-val4").val()
+ $("#user-val5").val()
+ $("#user-val6").val();
return temp;
} function verifyEmail(str) {
var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
return reg.test(str);
} function verifyPhone(str) {
var reg = /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/;
return reg.test(str);
} var checkFormat_message = "";
var checkFormat = function() {
// 是否改变
currentTotalVal = getTotalVal();
if (currentTotalVal === lastTotalVal) {
checkFormat_message = "您还没有修改信息!";
return false;
}
// 非空
if ($("#user-val1").val() === "" || $("#user-val1").val() === null) {
checkFormat_message = "昵称不能为空";
return false;
}
// 邮箱格式
if (!verifyEmail($("#user-val5").val())) {
checkFormat_message = "邮箱格式错误";
return false;
}
// 手机号码格式
if (!verifyPhone($("#user-val4").val())) {
checkFormat_message = "手机号格式错误";
return false;
}
lastTotalVal = currentTotalVal;
return true;
}; var userProfile = {
display: function() {
$.ajax({
url: 'user/userProfile.do',
method: 'GET',
success: function (data) {
$($('.sex')[data.sex]).attr('checked', true);
$("#user-val2").val(data.province);
$("#user-val2").trigger('change');
$("#user-val3").val(data.city);
$("#user-val3").trigger('change');
$("#user-val6").val(data.country);
$("#user-val6").trigger('change');
}
});
},
saveProfile: function() {
if (!checkFormat()) {
alert(checkFormat_message);
return false;
};
$.ajax({
url: 'user/saveProfile.do',
method: 'GET',
data: {
username: $("#user-val1").val(),
sex: getSexVal(),
province: $("#user-val2").val(),
city: $("#user-val3").val(),
country: $("#user-val6").val(),
phone: $("#user-val4").val(),
email: $("#user-val5").val(),
},
success: function (data) {
if(data.status == 200)
alert('保存成功');
else
alert('保存失败');
}
});
},
}; $(function () {
userProfile.display();
$('#btnSaveProfile').click(userProfile.saveProfile);
lastTotalVal = getTotalVal();
});
Web开发相关笔记 #02#的更多相关文章
- Web开发相关笔记 #04# WebSocket
本文的主要内容: HTTP VS. WebSocket WebSocket 的客户端实现(JavaScript) WebSocket 的服务端实现(Java & apache WebSocke ...
- Web开发相关笔记 #03#
HTTP Status 500 ※ jsp 放在 WEB-INF 外面 ※ 使用 JDBC 时需要 close 什么 ※ execute 和 executeUpdate ※ How can I ...
- Web开发相关笔记 #01#
前端学习纲要 ※jQuery 参考 ※ 整理 Chrome 收藏夹的小技巧 ※ 解决 AJAX 跨域获取 cookie ※ 记一次 MyBatis 相关的 debug [1] 前端学习纲要: ♦ 第一 ...
- Web开发相关笔记 #05# MySQL中文无法匹配
2018-06-02 在 Class.forName 的时候记得先尝试 import 一下. 2018-06-04 1.JDBC SELECT 查询,中文条件查不出东西,可能是字符编码问题: Stri ...
- Web开发相关笔记
1.MySQL命令行下执行.sql脚本详解http://database.51cto.com/art/201107/277687.htm 在可视化工具里导出.sql脚本 --> 放命令行里运行 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
- Django Web开发指南笔记
Django Web开发指南笔记 语句VS表达式 python代码由表达式和语句组成,由解释器负责执行. 主要区别:表达式是一个值,它的结果一定是一个python对象:如:12,1+2,int('12 ...
随机推荐
- JSP内置对象——session
sessionsession表示客户端与服务器的一次会话Web中的session指的是用户在浏览某个网站时,从进入网站到浏览器关闭所进过的这段时间,也就是用户浏览这个网站所花费的时间从上述定义中可以看 ...
- js文章收藏
js文件被浏览器缓存的问题:http://www.cnblogs.com/wangtao_20/p/4589898.html
- pdb文件及引发的思考
最初只想知道线上iis里需要不需要pdb文件,了解部分之后对于.net底层产生了浓厚的兴趣,看了一点点资料 资料来源: https://www.cnblogs.com/itech/archive/20 ...
- 【BZOJ1217】[HNOI2003]消防局的设立 树形DP
[BZOJ1217][HNOI2003]消防局的设立 Description 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地, ...
- 【BZOJ4318】OSU! 期望DP
[BZOJ4318]OSU! Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分,成功对应1 ...
- 解决多指操作放大缩小 指针错误 java.lang.IllegalArgumentException: pointerIndex out of range
/** Custom your own ViewPager to extends support ViewPager. java source: */ /** Created by azi on 20 ...
- jQuery设置内容和属性方
何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...
- 160229-02、Sublime Text 3 快捷键总结
选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数 ...
- PAT 甲级 1068 Find More Coins(0,1背包)
1068. Find More Coins (30) 时间限制 150 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Eva l ...
- King's Game---hdu5643(约瑟夫环)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5643 约瑟夫环问题的原来描述为,设有编号为1,2,……,n的n(n>0)个人围成一个圈,从 ...