【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#的更多相关文章

  1. Web开发相关笔记 #04# WebSocket

    本文的主要内容: HTTP VS. WebSocket WebSocket 的客户端实现(JavaScript) WebSocket 的服务端实现(Java & apache WebSocke ...

  2. Web开发相关笔记 #03#

    HTTP Status 500  ※  jsp 放在 WEB-INF 外面  ※ 使用 JDBC 时需要 close 什么 ※ execute 和 executeUpdate ※ How can I ...

  3. Web开发相关笔记 #01#

    前端学习纲要 ※jQuery 参考 ※ 整理 Chrome 收藏夹的小技巧 ※ 解决 AJAX 跨域获取 cookie ※ 记一次 MyBatis 相关的 debug [1] 前端学习纲要: ♦ 第一 ...

  4. Web开发相关笔记 #05# MySQL中文无法匹配

    2018-06-02 在 Class.forName 的时候记得先尝试 import 一下. 2018-06-04 1.JDBC SELECT 查询,中文条件查不出东西,可能是字符编码问题: Stri ...

  5. Web开发相关笔记

    1.MySQL命令行下执行.sql脚本详解http://database.51cto.com/art/201107/277687.htm 在可视化工具里导出.sql脚本 --> 放命令行里运行 ...

  6. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  7. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  8. ASP.NET Core Web开发学习笔记-1介绍篇

    ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...

  9. Django Web开发指南笔记

    Django Web开发指南笔记 语句VS表达式 python代码由表达式和语句组成,由解释器负责执行. 主要区别:表达式是一个值,它的结果一定是一个python对象:如:12,1+2,int('12 ...

随机推荐

  1. 【黑金原创教程】【Modelsim】【第六章】结束就是开始

    声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...

  2. js/vue 高德地图绘制驾车路线图

    地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...

  3. 160317(一)、在非action中获取request

    HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes() ...

  4. Spring-AOP的五种通知和切面的优先级、通知变量声明

    SpringAOP的通知分为以下五种: 1前置通知(@before)在连接点执行之前执行的代码 2后置通知(@after)在连接点执行之后执行的代码,不管连接点执行后是否出现异常,后置通知都会执行,但 ...

  5. CentOS中制作本地yum源

    1.光盘指向镜像 2.将镜像挂载到某个目录 mkdir /mnt/cdrom mount -t iso9660 -o ro /dev/cdrom /mnt/cdrom 3.修改本机上的YUM源配置文件 ...

  6. 第十课——cluster故障转移操作,codis部署

    作业描述] 1.cluster的故障转移操作,截图展示 2.部署codis,并写代码访问codis ================================================== ...

  7. HTML代码大全

    1.html的简介* 什么是html?- HyperText Markup Language:超文本标记语言,网页语言** 超文本:超出文本的范畴,使用html可以轻松实现这样操作** 标记:html ...

  8. libxml_disable_entity_loader

    w避免加载外部实体字符. http://php.net/manual/en/function.libxml-disable-entity-loader.php libxml_disable_entit ...

  9. Linux命令(基础3)

    关机重启 reboot poweroff ============================ linux命令分类 1.针对不同文件的管理命令 1.1 目录 FHS 文件系统层次化标准 绝对路径: ...

  10. first-child与:first-of-type的区别

    css选择器中:first-child与:first-of-type的区别 :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:f ...