DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 修改後的prototype.js,增加進度條和驗證輸入框
修改後的prototype.js,增加進度條和驗證輸入框
編輯:AJAX詳解     

使用示例
<script type="text/Javascript" src="../scripts/prototype.JS"></script>
<script type="text/Javascript">
var progressBar;
/**//*
* 功能:admin登錄
*/
function UserLogin()
{
   
    //驗證頁面控件
    var checkform = new CheckForm();
    if(!checkform.checkForm(document.getElementById('formLogin'))) return false;   
       
    //開始提交數據
    progressBar = new ProgressBar();
    progressBar.SetStatus("正在發送數據到服務器.");
   
    var url = "../admin.do";
    var pars = "action=Login&username=" + $F('username') + "&password=" + $F('passWord') + "&rnd=" +$F('rnd');
    var myAjax = new AJax.Request(
    url,
    {method: 'post', parameters: pars, onComplete: UserLogin_CallBack}
    );
}
/**//*
* 功能:admin登錄 - CallBack
*/
function UserLogin_CallBack(originalRequest)
{
  var objXml = originalRequest.responseXML;
  //alert(originalRequest.responseTEXT);
  try
  {
    if(objXML.getElementsByTagName("return")[0].firstChild.nodeValue == "true")
    {
      progressBar.isNeedConfirmButton = false;
      progressBar.isNeedProgressBar = true;
      progressBar.SetStatus("<img src='/UploadPic/2007-4/200741192059453.gif' align='absmiddle'> 登錄成功,正在載入,請稍候..");

      //login success
      location.href='admin_index.htm';
    }
    else
    {
      progressBar.isNeedConfirmButton = true;
      progressBar.isNeedProgressBar = false;
      progressBar.focusItem = "username";
      progressBar.SetStatus("<img src='/UploadPic/2007-4/200741192059453.gif' align='absmiddle'> 對不起,登錄失敗!" + objXML.getElementsByTagName("msg")[0].firstChild.nodeValue);

      $('btnOK').disabled = false;
    }
  }
    catch(err)
    {
      progressBar.isNeedConfirmButton = true;
      progressBar.isNeedProgressBar = false;
      progressBar.focusItem = "username";
      progressBar.SetStatus("<img src='/UploadPic/2007-4/200741192059453.gif' align='absmiddle'> 對不起,登錄失敗!" + err.message);

      $('btnOK').disabled = false;
    }
  }
</script>

<table width="100%" border="0" cellpadding="3" cellspacing="0">
              <tr>
                <td colspan="3" height="30"></td>
              </tr>
              <tr>
                <td width="21%">用戶名:</td>
                <td colspan="2">
                  <input type="text" tabindex="1" id="username" name="username" chname="用戶名" notempty="true" size="20" style="width:180px;" /></td>
              </tr>
              <tr>
                <td>密 碼:</td>
                <td colspan="2"><input type="password" tabindex="2" id="password" name="passWord" chname="密碼" notempty="true" size="20" style="width:180px;" /></td>
              </tr>
              <tr>
                <td>驗證碼:</td>
                <td colspan="2">
                  <input type="text" style="width:120px;" id="rnd" tabindex="3" chname="驗證碼" class="input_1" notempty="true" onKeyUp="value=value.replace(/[^\d]/g,'')"/>
                  <img alt="驗證碼" src="../rnd.do?type=admin_rnd" border="0" usemap="absmiddle"/></td>
              </tr>             
                <tr>
                  <td class="white"> </td>
                  <td width="22%"><input type="submit" Class="input_1" id="btnOK" value="登 錄" tabindex="4"></td>
                    <td width="57%"><input type="reset" Class="input_1" value="重 置"></td>
                </tr>
                <tr>
                  <td colspan="3" height="2"></td>
                </tr>
                <tr>
                  <td colspan="3"></td>
                </tr>
        </table>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved