快速學習AJAX之五 Ajax註冊(需要資料庫了)

我們這節課程討論一下AJAX實現註冊，當然，這個全當練習了，後面，下節課程我們在講AJAX的無重新整理上傳檔案。

我們首先開啟我們的 資料庫，我用的 08R2 的，當然，你可以用自己的資料庫版本 ，或者ACCESS的，這個俺就不管了。

首先是UserTable

上面就是簡單的結構了，下面我們搭建一個簡單的HTML頁面

這裡注意大家不要用<form>那種方式傳值了，我們做的是AJAX的那麼，我們需要的結構是這種情況

Register.htm ---->   Register.ashx  ----->  資料庫中

好了，貯備工作做好了，下面我們就開始我們的程式，這裡，我需要首先提示大家幾個地方，
第一，我們首先不處理【性別】；
第二，我們不處理【上傳圖片】---就是頭像，下節課我們主要討論，上傳頭像，和產生微縮圖。
好了，我們一點點的完善我們的程式

首先我們需要得到頁面上的所有 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 對象。

然後我們使用一些特定的篩選條件，得到我們需要的資料，然後拼接一個不是很準確的字串，當然這個字串我們還需要處理。

好了，我們繼續我們的操作。

這個字串，我想一會我們用著也不方便吧，所以我們改良一下。下面就是性別了。我們要修改 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了，看下效果。

再看一下 字串，哈哈，可以了，已經OK了。  這個字串給我們用太好了。

好了，我們下面需要貯備的當然是資料庫連接了，還有插入資料了啊，下面，我們寫幾個類。

首先是 User 類 我想這個最簡單的 的第一個操作就是 插入一個學生了

 

 

CreateUser  這個方法我沒有展開，是因為我想大家應該可以自己寫出來的 ，就是一個簡單的插入資料操作。

Register.ashx 頁面的代碼，稍微修改一下。

好了，我們先這麼簡單的實現一下，下節課，我去把這個 做的更見的人性化一些。

下面我們做一個這個效果，單擊註冊按鈕，彈出註冊表單。

彈出表單的指令碼【因為我主要是說一下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。