【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. 【NGUI】Unity3D UIGrid 排序、动态加载与销毁

    本帖最后由 Lucifer_H 于 2014-10-31 09:39 编辑 做 UIGrid 的动态加载是做游戏的装备列表时用到的,装备信息都是从后台发过来的,具体加载的代码如下: [C#] 纯文本查 ...

  2. 五 Android Studio打包Eegret App (包名和签名,打出正式包)

    一 定义包名 如下图,在AndroidManifest.xml中的package就是包名 二 创建keystore 选择Build->Generate Signed APK 选择create n ...

  3. oracle 存储过程返回结果集

    好久没上来了, 难道今天工作时间稍有空闲, 研究了一下oracle存储过程返回结果集. 配合oracle临时表, 使用存储过程来返回结果集的数据读取方式可以解决海量数据表与其他表的连接问题. 在存储过 ...

  4. panzer 电力项目十一--hibernate操作大文本字段Blob和Clob

    hibernate操作大文本字段Blob和Clob解决方案: 1.大文本字段Blob和Clob(流); 2.截串存取 第一步: 创建新表:Elec_CommonMsg_Content create t ...

  5. C# 控件,MenuStrip,statusStrip,contextMenuStrip,ImageList, Listview,MonthCalendar、DataGridView,combobox,textbox,DateTimePicker,treeview,picturebox、toolStrip,radioButton,TableLayoutPanel

    一.菜单栏 1)MenuStrip 菜单栏 选择工具栏控件:menuStrip C# Menustrip控件的常用属性用法详解 C#WinForm应用程序——添加菜单栏MenuStrip] 1.通过右 ...

  6. java通过ping 判断网络是否正常

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...

  7. 并发编程 - 进程 - 1.开启子进程的两种方式/2.查看pid/3.Process对象的其他属性或方法/4.守护进程

    1.开启子进程的两种方式: # 方式1: from multiprocessing import Process import time def task(name): print('%s is ru ...

  8. 使用nginx搭建文件下载服务器

    搭建一个文件服务器的方式有很多,本文介绍笔者曾经用过的两种: 使用nginx 使用java服务,通过controller提供 一.使用nginx搭建 在nginx.conf中直接配置server即可, ...

  9. nsq小试牛刀-0.3.0 API变更

    NSQ是由知名短链接服务商bitly用Go语言开发的实时消息处理系统,具有高性能.高可靠.无视单点故障等优点,是一个非常不错的新兴的消息队列解决方案. nsg易于配置和部署,所有参考都通过命令行指定, ...

  10. 十個必用的 Vim Plugin

    ◎ The NERD Tree 操作 Vim 時,通常都在 Terminal 底下作用,無法像一般的 GUI    應用程式可以以樹狀目錄來瀏覽檔案. The NERD Tree    是一將檔案目錄 ...