又一周过去了,用该随笔说明这周的一些成果和遇到的问题。
辅助教学网页的大部分基本功能都已实现了,是时候写一个漂亮的界面把功能加入了,可是我们却遇到了瓶颈。因为之前我们网页设计是用的一种原型设计工具,可能是不太熟练吧,出来的网页不太美观,而且自动出来的代码也比较杂乱,没有什么参考价值,不适合按照其去设计下去。没时间再重新改了,那就只能加班加点自己重新设计咯(只能说我们最开始分工并不明确,不然也不会到最后又要重新开始这种并行的任务)。我在网上找了许多网页设计的PSD,去学习别人的版面,最后将主页板块按下图排版:
可能界面比较简陋,但是主要是功能实现,而且目前也没那么多内容可以填充,对基本功能的加入已经足够,进一步美化可以先做出成品后下个版本再慢慢改。
然后再说说一个运用AJAX的实例吧,对于用户注册账户的时候,虽然我们是要他已学号注册,但是我们不能允许重复注册或者其他恶意注册。。所以当用户输入完他所需注册的账号后,系统会马上进入后台判断该账号是否存在,如果存在,拒绝提交该表单,否则正常注册。
这是填写学号表单的html代码:<label for = "id">学号</label><input name = "id" type = "text" id = "id"/> <span id = "chk"></span>
当用户光标离开学号那一栏时,进行判断,将输出的内容放在后面的SPAN中
1 $("#id").blur(function(){
2 $.ajax({
3 url:"check.php",
4 type:"POST",
5 data:"id="+$("#id").val(),
6 success: function(data)
7 {
8 if( data == 1)
9 {
10 $("#chk").css("color","green");
11 $("#chk").html("可以注册");
12 }
13 else
14 {
15 $('#chk').css("color","red");
16 $("#chk").html("该用户已存在,不可以注册!");
17 flag = 0;
18 return false;
19 }
20 }
21
22 })
23
24 });
后台判断代码check.php
1 <?php
2
3 include_once $_SERVER['DOCUMENT_ROOT'].
4 '/first/includes/db.ini.php'; #连接到数据库
5
6 Function isequal($id)
7 {
8 include $_SERVER['DOCUMENT_ROOT'].
9 '/first/includes/db.ini.php'; #连接到数据库
10 try
11 {
12 $sql = 'SELECT id
13 FROM student
14 WHERE id = :id';
15 $s = $pdo->prepare($sql);
16 $s->bindValue(':id', $id);
17 $s->execute();
18 $result = $s->rowCount();
19 if($result == 0)
20 {
21 return true;
22 }
23 else
24 {
25 return false;
26 }
27 }
28 catch (PDOException $e)
29 {
30 $output = 'xxxcxx!' . $e->getMessage();
31 include '../includes/output.html.php';
32 exit();
33 }
34 }
35 header("Content-type:text/html;charset=UTF-8");
36 if($_POST['id'])
37 {
38 $user=$_POST['id'];
39 if(isequal($user))
40 echo 1;
41 else
42 {
43 echo 0
44 }
45
46 }
47
48
49
这样做了以后,虽然可以实时检查出用户名是否出现重复,但是发现还是可以提交注册,因为显示重复后并没有阻止该表单提交。
搜寻资料后,发现问题可以这样解决。
定义一个全局变量 var flag = 1;
写了一个简单的判断函数
1 function checkform()
2 {
3 if(flag == 1)
4 {
5 return true;
6 }
7 else
8 {
9 flag = 1;
10 return false;
11 }
12 }
13
然后在表单FORM中 加入一项onsubmit = "return checkform()" 问题就解决了~
时间已经不多,我们会尽全力提交一份满意的答卷。