jQuery Ajax提交表單查詢獲得數(shù)據(jù)實(shí)例代碼
更新時(shí)間：2012年09月19日 21:33:39 作者：
用戶輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶是否輸入表單，點(diǎn)擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)
看一個(gè)用jQuery提交表單ajax查詢的例子。
基本功能：用戶輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶是否輸入表單，點(diǎn)擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)。
代碼如下：
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)考證號(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部分:
<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="查詢" /> </div>
</div>
<div id="msg" style=" width:600px;text-align:center; margin-top:20px;"></div>
基本功能：用戶輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶是否輸入表單，點(diǎ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="查詢" /> </div>
</div>
<div id="msg" style=" width:600px;text-align:center; margin-top:20px;"></div>
您可能感興趣的文章:
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jQuery使用ajaxSubmit()提交表單示例
- jQuery ajax中使用serialize()方法提交表單數(shù)據(jù)示例
- jquery+ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理
- jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
- Jquery基于Ajax方法自定義無(wú)刷新提交表單Form實(shí)例
- jquery ajax 如何向jsp提交表單數(shù)據(jù)
- jQuery提交表單ajax查詢實(shí)例代碼
- jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新
- jQuery基于Ajax方式提交表單功能示例
- 一些jQuery表單實(shí)例 Ajax表單判斷代碼打包
相關(guān)文章
jQGrid動(dòng)態(tài)填充select下拉框的選項(xiàng)值(動(dòng)態(tài)填充)
這篇文章主要介紹了jQGrid動(dòng)態(tài)填充select下拉框的選項(xiàng)值(動(dòng)態(tài)填充)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁(yè)面元素動(dòng)態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了EasyUI中在表單提交之前進(jìn)行驗(yàn)證的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select ，需要的朋友可以參考下。2009-10-10
JQuery擴(kuò)展插件Validate 2通過(guò)參數(shù)設(shè)置驗(yàn)證規(guī)則
在前面示例中使用的的方法簡(jiǎn)單方便，但沒(méi)有完全將js與頁(yè)面結(jié)構(gòu)完全分離，也就是說(shuō)js依賴了class,下面通過(guò)validate()方法的參數(shù)設(shè)置驗(yàn)證規(guī)則將js與頁(yè)面結(jié)構(gòu)完全分離2011-09-09
基于jQuery的可以控制左右滾動(dòng)及自動(dòng)滾動(dòng)效果的代碼
迷上jQuery,相對(duì)于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研習(xí)原生JavaScript.2010-07-07
jquery 簡(jiǎn)單導(dǎo)航實(shí)現(xiàn)代碼
jquery簡(jiǎn)單導(dǎo)航實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-09-09
jQuery簡(jiǎn)單實(shí)現(xiàn)禁用右鍵菜單
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)禁用右鍵菜單的方法，非常的簡(jiǎn)單實(shí)用，這里分享給大家，有需要的小伙伴直接拿走使用。2015-03-03
一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
在實(shí)際應(yīng)用中，我們經(jīng)常會(huì)遇到這樣的場(chǎng)景，當(dāng)頁(yè)面加載完成后去做一些事情：綁定事件、DOM操作某些結(jié)點(diǎn)等。2011-02-02
JQuery學(xué)習(xí)筆錄 簡(jiǎn)單的JQuery
尺寸小、使用簡(jiǎn)單方便（Write Less, Do More，吃得少干得多，而且目前許多大公司都在支持JQuery，例如微軟，微軟把JQuery繼承在了vs2010中2012-04-04