天津职业技术师范大学2015届本科生毕业设计
var $comment = \
$(\按钮点击事件
$comment = $(\回车符>\ var $lst_note = function () { var $webU = \
$webU = '/NewsApi.ashx?act=Note&userName=' + \'¬e_Com=' + \
$.getJSON($webU, {}, function (response, result) { alert(\保存成功！\ }) }
$lst_note(); })
var $comment2 = $(\
$(\按钮点击事件 var $lst_note2 = function () { var $webU = \
var com2 = \
$webU = '/NewsApi.ashx?act=Note2&userName=' + \$.getJSON($webU, {}, function (response, result) {
$.each(response.Table, function (index, item) {
com2 = item.com;
com2 = com2.replace(/<回车符>/g,\ $comment2.html(com2); }); }) }
$lst_note2(); })
“云记事”页在Opera Mobile Emulator 12.1下的运行效果，如图5-10所示。 5.2.8普通话报名
“普通话报名”页提供普通话报名功能，其实现的逻辑与四六级报名页类似。页面中有一个单选按钮和一个提交按钮，提交按钮在单选按钮没有选定时处于不可用状
30
天津职业技术师范大学2015届本科生毕业设计
图5-10云记事页效果图
态。在javascript代码中，将单选按钮绑定至change事件。当单选按钮被选定后在change函数中改变提交按钮的状态，使其变为可用。在用户点击提交按钮时，将用户的id号和单选按钮值作为要访问的URL的参数。使用$.getJSON方法访问接口文件，对数据库中的值进行修改。修改成功后提示用户“报名成功”。
“普通话报名”页在Opera Mobile Emulator 12.1下的运行效果，如图5-11所示。
5.2.9我要请假
请假模块由两个页面组成，在导航栏中默认打开的是“申请休假”页，“申请休
假”页由多个input元素组成，供用户提交请假信息。在实现该页面的javascript脚本中，先定义了一个show()函数，用于获取当前时间，并按固定的格式产生返回值。然后，获取用户的登录id，并将其显示到页面中。当用户点击“Button”按钮时，获取页面中用户填写的请假信息，并将这些信息作为要访问的URL的参数。最后，调用$.getJSON方法访问API执行插入数据操作，插入成功后提示用户“请假申请已经提交，请等待！”。导航栏中的另一个页面是“请假记录”页，该页面用于显示用户
31
天津职业技术师范大学2015届本科生毕业设计
图5-11 普通话报名页效果图
最近10次的请假记录，当用户请假记录不足10次时根据用户的实际情况进行显示。该页面中只有一个无序列表视图，用于显示用户的请假记录。该页面的javascript脚本部分也相对简单，只是把用户的id号作为参数传给要访问的API就可以了。后台执行查询时将按用户提交请假申请的倒序id号进行数据返回，且只返回最近的10条数据。事实上，过去的请假信息对于用户个人来说，意义不大。所以只返回10条数据。对于返回的每条数据的每一列的值添加一定的格式后压入数组中，经join方法处理后显示到页面中。
以下是该页面的核心javascript代码： function show() {
var mydate = new Date();
var str = \ str += (mydate.getMonth() + 1) + \ str += mydate.getDate() + \ str += mydate.getHours() + \
32
天津职业技术师范大学2015届本科生毕业设计
str += mydate.getMinutes(); return str; }
保存用户提交信息： var $lst_Ask = function () { var $webU = \
$webU = '/NewsApi.ashx?act=Ask&userName=' + \+ $user_id + \+ '&CLASS=' + \\+ $end + \+ '&tellC=' + \+ $tellcode + \+ '&REASON=' + \+ $Reason + \
$.getJSON($webU, {}, function (response, result) { alert(\请假申请已提交，请联系班主任或等待审批！\ }) }
获取用户请假记录：
var $tpl_list = function ($p_array, $p_items) { $.each($p_items.Table, function (index, item) { last += index;
$li = '
var $lst_Ask2 = function () {
$webUr = '/NewsApi.ashx?act=Ask2&userName=' + \ $.getJSON($webUr, {}, function (response, result) { var li_array = [];
$tpl_list(li_array, response); $listview.html(li_array.join('')); $listview.listview('refresh'); }); }
下面是该页面在Google手机模拟浏览器下的执行效果，如图 5-12 所示：
33
天津职业技术师范大学2015届本科生毕业设计
图5-12 我要请假页执行效果图
34