快捷導(dǎo)航

jQuery Ajax提交表單查詢獲得數(shù)據(jù)實例代碼

更新時間：2012年09月19日 21:33:39 作者：

用戶輸入一個表單，輸入準(zhǔn)考證和驗證碼，驗證用戶是否輸入表單，點擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來

看一個用jQuery提交表單ajax查詢的例子。
基本功能：用戶輸入一個表單，輸入準(zhǔn)考證和驗證碼，驗證用戶是否輸入表單，點擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來。

代碼如下：

jQuery部分：

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$("#btnSubmit").click(function() { 
Login(); 
}); 
}); 
function Login() { 
if (Check()) { 
LoginSuccess(); 
} 
} 
function Check() { 
if ($("#ksbh").val() == "") { 
alert("準(zhǔn)考證號不能為空！"); 
$("#ksbh").focus(); 
return false; 
} 
if ($("#Yzm").val() != $.cookie('ValidateCode')) { 
alert("驗證碼錯誤！") 
$("#Yzm").focus(); 
return false; 
} 
return true; 
} 
function LoginSuccess() { 
$.ajax({ 
type: "POST", 
url: "/zk/zkcj201204a", 
data: { ksbh: $("#ksbh").val()}, 
beforeSend: function() { $("#msg").html("loading......正在提交請稍候。"); }, 
success: function(data) { 
$("#msg").html(data).show(); 
document.getElementById("valiCode").src = document.getElementById("valiCode").src+'?'; 
} 
}); 
} 
</script> 

htm部分:

復(fù)制代碼代碼如下:

 
<div id="lmain"> 
<div><span class="s1">準(zhǔn)考證號：</span><span class="s2"><input id="ksbh" maxlength="12" name="ksbh" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" value="" /></span></div> 
<div><span class="s1">驗證碼：</span><span class="s3"><input id="Yzm" name="Yzm" type="text" value="" /><img id="valiCode" style="cursor: pointer;height:22px; line-height:22px; vertical-align:middle;" src="../Validate/GetValidateCode" onclick="this.src=this.src+'?'" alt="看不清？點擊更換" /></span></div> 
<div style=" text-align:center;"><input type="button" id="btnSubmit" value="查詢" /> </div> 
</div> 
<div id="msg" style=" width:600px;text-align:center; margin-top:20px;"></div> 

您可能感興趣的文章: