快速学习AJAX之五 Ajax注册(需要数据库了)

我们这节课程讨论一下AJAX实现注册,当然,这个全当练习了,后面,下节课程我们在讲AJAX的无刷新上传文件

我们首先打开我们的 数据库,我用的 08R2 的,当然,你可以用自己的数据库版本 ,或者ACCESS的,这个俺就不管了。

首先是UserTable

1

上面就是简单的结构了,下面我们搭建一个简单的HTML页面

2

这里注意大家不要用<form>那种方式传值了,我们做的是AJAX的那么,我们需要的结构是这种情况

Register.htm ---->   Register.ashx  ----->  数据库中

3

好了,贮备工作做好了,下面我们就开始我们的程序,这里,我需要首先提示大家几个地方,
第一,我们首先不处理【性别】;
第二,我们不处理【上传图片】---就是头像,下节课我们主要讨论,上传头像,和生成微缩图。
好了,我们一点点的完善我们的程序

首先我们需要得到页面上的所有 input标签元素,但是我们并不是需要全部的,例如 那些 提交按钮,取消按钮啊,没有必要要。
所以我写下如下代码

function register() {
    createXmlHttpRequest();
    var inputs = document.getElementsByTagName('input');
    var Parameters = '';
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].getAttribute('name') != null) {
            Parameters+=inputs[i].getAttribute('name') + "=" + inputs[i].value+"&";
        }
    }
    alert(Parameters);
}

createXmlHttpRequest(); 不用说了,代表着创建一个XMLHttp 对象。

然后我们使用一些特定的筛选条件,得到我们需要的数据,然后拼接一个不是很准确的字符串,当然这个字符串我们还需要处理。

4
好了,我们继续我们的操作。

这个字符串,我想一会我们用着也不方便吧,所以我们改良一下。下面就是性别了。我们要修改 sex 这个参数。
哎,好想写JQUERY啊,呵呵,这种原生态的AJAX还真麻烦,不过,还是慢慢的实现吧。(*^__^*) 嘻嘻……

好了,我们继续  修改一下  这个性别的  DOM 节点。

<input type="radio" name="sex" value="1" onclick="getsex(this.value);" checked="checked"/><input type="radio" name="sex" value="0" onclick="getsex(this.value);"/>

这个 this.value 就是传递节点的 value 值。  下面修改一下我们的脚本。

    <script type="text/javascript">
        var Parameters = '';
        function register() {
            Parameters = '';
            createXmlHttpRequest();
            var inputs = document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].getAttribute('name') != null) {
                    Parameters+=inputs[i].getAttribute('name') + "=" + inputs[i].value+"&";
                }
            }
            Parameters = Parameters.substring(0, Parameters.length - 1);
            alert(Parameters.replace('sex=1&sex=0', 'sex=' + sex));
        }
        var sex = "1";
        function getsex(value) {
            sex = value;
        }

    </script>

OK了,看下效果。

5

再看一下 字符串,哈哈,可以了,已经OK了。  这个字符串给我们用太好了。

好了,我们下面需要贮备的当然是数据库连接了,还有插入数据了啊,下面,我们写几个类。

首先是 User 类 我想这个最简单的 的第一个操作就是 插入一个学生了

 

31

 

CreateUser  这个方法我没有展开,是因为我想大家应该可以自己写出来的 ,就是一个简单的插入数据操作。

Register.ashx 页面的代码,稍微修改一下。

1
好了,我们先这么简单的实现一下,下节课,我去把这个 做的更见的人性化一些。
下面我们做一个这个效果,单击注册按钮,弹出注册窗体

2
弹出窗体的脚本【因为我主要是说一下AJAX的方法,所以脚本的操作就简单带过了】,下面的方法,你应该可以看得明白

function register(url, name, iWidth, iHeight) {
    var url;
    var name;
    var iWidth;
    var iHeight;
    var iTop = (window.screen.height - 30 - iHeight) / 2;
    var iLeft = (window.screen.width - 10 - iWidth) / 2;
    window.open(url, name, 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no,z-look=yes');
    
}
修改注册的DOM标签
  <input type="button" value="注册" onclick="javascript:register('Register.htm','注册窗口',400,400);"/>

好了,完成了

今天得课程,就到这里了,慢慢跟新吧,哈哈,对了,大家不要再说什么JQUERY好了,我也知道 JQ好,我只是想写一套原生态的AJAX就好了

 

3Q。

posted @ 2011-08-19 16:36  KingDZ  阅读(2722)  评论(3编辑  收藏  举报