快捷導(dǎo)航

jQuery提交表單ajax查詢(xún)實(shí)例代碼

更新時(shí)間：2012年10月07日 01:44:12 作者：

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

看一個(gè)用jQuery提交表單ajax查詢(xún)的例子。
基本功能：用戶(hù)輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶(hù)是否輸入表單，點(diǎn)擊查詢(xún)提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)。
代碼如下：
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)考證號(hào)不能為空！"); 
$("#ksbh").focus(); 
return false; 
} 
if ($("#Yzm").val() != $.cookie('ValidateCode')) { 
alert("驗(yàn)證碼錯(cuò)誤！") 
$("#Yzm").focus(); 
return false; 
} 
return true; 
} 
function LoginSuccess() { 
$.ajax({ 
type: "POST", 
url: "/zk/zkcj201204a", 
data: { ksbh: $("#ksbh").val()}, 
beforeSend: function() { $("#msg").html("loading......正在提交請(qǐng)稍候。"); }, 
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)考證號(hào)：</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="查詢(xún)" /> </div> 
</div> 
<div id="msg" style=" width:600px;text-align:center; margin-top:20px;"></div> 

您可能感興趣的文章:

ajax查詢(xún)

相關(guān)文章

判斷文檔離瀏覽器頂部的距離的方法
文檔離瀏覽器頂部的距離如何判斷，下面有個(gè)不錯(cuò)的方法，感興趣的朋友可以參考下
2014-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
jQuery之尺寸調(diào)整組件的深入解析
本篇文章是對(duì)jQuery中的尺寸調(diào)整組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-06-06
Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
用到Struts2的s:radio標(biāo)簽時(shí)想給它添加一個(gè)change事件，由于此標(biāo)簽為頁(yè)面自動(dòng)生成一個(gè)radio組，不可以像正常那樣控制，于是想到用jquery來(lái)實(shí)現(xiàn)
2013-04-04
javascript trim函數(shù)在IE下不能用的解決方法
trim 函數(shù)在firefox 下面使用沒(méi)有問(wèn)題，但是在IE下就報(bào)錯(cuò)，下面是可行的解決方法，大家可以看看
2014-09-09
JQEasy-ui在IE9以下版本中二次加載的問(wèn)題分析及處理方法
之前項(xiàng)目中才用了Easy-ui，但是在同時(shí)使用tree和grid的效果時(shí)，因?yàn)轫?yè)面有倆個(gè)URL,分別為Ajax樹(shù)去后臺(tái)取數(shù)據(jù)和Grid取數(shù)據(jù)，在IE9以上以及其他瀏覽器里都沒(méi)有問(wèn)題，在Ie低版本時(shí)會(huì)出現(xiàn)先加載表格，然后一閃而過(guò)加載樹(shù)渲染頁(yè)面，造成頁(yè)面只有tree數(shù)據(jù)而沒(méi)有表格grid數(shù)據(jù)。
2014-06-06
HTML頁(yè)面彈出居中可拖拽的自定義窗口層
這篇文章主要介紹了HTML頁(yè)面如何彈出居中可拖拽的自定義窗口層,需要的朋友可以參考下
2014-05-05
jQuery插件windowScroll實(shí)現(xiàn)單屏滾動(dòng)特效
本文給大家分享的是一個(gè)使用jQuery插件windowScroll實(shí)現(xiàn)的單屏滾動(dòng)的特效，主要參考搜狗瀏覽器4.2版本首頁(yè)的上下滾動(dòng)效果。主要實(shí)現(xiàn)整個(gè)窗口的上下和左右滾動(dòng)邏輯，非常的實(shí)用。
2015-07-07
jQuery標(biāo)簽替換函數(shù)replaceWith()的使用例子
這篇文章主要介紹了jQuery標(biāo)簽替換函數(shù)replaceWith()的使用例子,使用replaceWith可以替換模板里的標(biāo)簽,還可以實(shí)現(xiàn)多語(yǔ)言網(wǎng)站,需要的朋友可以參考下
2014-08-08
jQuery滾動(dòng)加載圖片效果的實(shí)現(xiàn)
實(shí)現(xiàn)滾動(dòng)加載的一個(gè)功能函數(shù)，需要的朋友可以參考一下
2013-03-03