ajax實現的無重新整理使用者登入例項程式碼

無重新整理登入或者提交留言等功能，現在是越來越流行了，如果一個網站沒有點ajax的應用實在感覺沒有任何技術水平，當然這個技術其實也沒有什麼難度，下面就是一段這樣的程式碼例項，對於初學者應該是有所幫助。

下面分段貼出程式碼:

[HTML] 純文字檢視 複製程式碼
<table>
  <tr>
    <td>使用者名稱:</td>
    <td><input type="text" id="username" /></td>
  </tr>
  <tr>
    <td>密碼:</td>
    <td><input type="text" id="password" /></td>
  </tr>
  <tr>
    <td>驗證碼:</td>
    <td><input type="text" id="cord" />
      <img alt="點選更換驗證碼" title="看不清楚，請單擊我！" id="checkcord" src="img.ashx" /></td>
  </tr>
  <tr>
    <td><input type="button" value="登入" /></td>
    <td></td>
  </tr>
</table>

上面是登入資訊填寫的部分。

二.jQuery程式碼部分:

[JavaScript] 純文字檢視 複製程式碼
function login(){ 
  $.ajax({ 
    url:'Login.ashx',
    data:'username='+$("#username").val()+"&password="+$("#password").val()+"&cord="+$("#cord").val(), 
    type:'post',
    error:function(){
      alert("連結伺服器錯誤！"); 
    }, 
    success: function(msg){
      alert(msg); 
    } 
  }); 
} 
//驗證碼圖片 
$(function(){ 
  $("#username").focus(); 
  $("#checkcord").click(function(){ 
    $("#checkcord").attr("src","img.ashx?time="+new Date()); 
  })
})

三.c#後臺處理程式碼如下:

[C#] 純文字檢視 複製程式碼
context.Response.ContentType="text/plain"; 
string username=context.Request.Form["username"]; 
string password=context.Request.Form["password"]; 
string cord=context.Request.Form["cord"]; 
if(context.Session["cord"]!=null) { 
  if(context.Session["cord"].ToString()==cord) { 
    if(username=="admin"&&password=="admin") { 
      context.Response.Write("登入成功！"); 
    } 
    else { 
      context.Response.Write("登入失敗！使用者名稱和密碼錯誤!"); 
    } 
  } 
  else { 
    context.Response.Write("驗證碼錯誤！"); 
  } 
}