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

2024-05-06 14:21:13

字體：大中小

供稿：網(wǎng)友

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

代碼如下：

jQuery部分：
代碼如下:
<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("驗(yàn)證碼錯誤！")
$("#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部分:

代碼如下:
<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">驗(yàn)證碼：</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="看不清？點(diǎn)擊更換" /></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>

上一篇：Javascript操作cookie的函數(shù)代碼

下一篇：點(diǎn)彈代碼點(diǎn)擊頁面任何位置都可以彈出頁面效果代碼