ajax無刷新驗證注冊信息示例,其大概思路如下:
一.把注冊的html頁面做好(html+css)
1.不需要form表單,直接用div包著
2.需要四個標簽來顯示正確、錯誤的信息顯示
3.不用submit提交按鈕,直接用button
如圖:
二.把ajax做成一個函數,通過傳簡單的參數可以與服務器進行數據交換.
1.這個ajax函數前面有一篇如何處理利用ajax處理返回數據的文章中詳細說明了。
2.ajax函數需要三個參數,url,jsonData,getMsg。這里的url都是regProcess.php,jsonData則是要傳到服務器驗證的數據,getMsg就是要獲取返回的數據的函數.
3.重復第2步驟就可以驗證完四個信息
三.做一個處理注冊信息的regProcess.php文件
1.這個就是要處理ajax傳過來的數據,注意發送方式是POST所以接收方式也是POST
2.把數據都接收到以后,就是進行驗證,判斷了。最重要的還是能否把數據接收成功,千萬不能接收錯數據.
這里要注意一下,有一些特殊字符在傳到服務器的的時候會顯示不正確,例如‘+'會被顯示成‘ '空格,詳細的信息請自行搜索.所以服務器接收的時候如果會有特殊字符傳過來,需要進行編碼后才能正確使用.php使用urlencode這個函數來進行url編碼.
四.把需要用到的功能編寫成函數,放到另一個myFunc.php文件中,然后導入regProcess.php文件中直接使用.
1.驗證用戶名是否非法,是否已經注冊
2.驗證密碼是否非法,強度有多大
3.驗證密碼是否輸入一致
4.驗證郵箱是否非法,是否已經注冊
5.保存用戶信息到數據庫
然后在regProcess.php中,使用這些函數,直接處理返回的錯誤代碼即可。
五.返回處理后的數據,這里我以字符串的json形式返回,然后JS再進行解析.
1.返回的數據要拼接成json的格式.
json格式: {name1:value1,name2:value2};
但是我們要返回的實際是是字符串,所以應該這樣'{“name1”:”value1”,”name2”:”value2”}';
2.返回到前端后用JS的eval函數解析成一個json對象.
例如:var json = eval(‘(‘+oAjax.responseText+')');
3.把驗證的信息顯示在對應的input后面。
4.點擊注冊,一次性提交所有數據,如果沒有錯則保持注冊用戶信息,并提示注冊成功.
注冊成功效果如下圖:
數據庫也把剛注冊的信息更新了
新聞熱點
疑難解答
圖片精選