jQuery Ajax提交表單查詢獲得數(shù)據(jù)實(shí)例代碼
更新時(shí)間:2012年09月19日 21:33:39 作者:
用戶輸入一個(gè)表單,輸入準(zhǔn)考證和驗(yàn)證碼,驗(yàn)證用戶是否輸入表單,點(diǎn)擊查詢提交,然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來
看一個(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)證碼錯(cuò)誤!")
$("#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>
基本功能:用戶輸入一個(gè)表單,輸入準(zhǔn)考證和驗(yàn)證碼,驗(yàn)證用戶是否輸入表單,點(diǎ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("驗(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......正在提交請稍候。"); },
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">驗(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)證不通過也提交表單問題處理
- jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
- Jquery基于Ajax方法自定義無刷新提交表單Form實(shí)例
- jquery ajax 如何向jsp提交表單數(shù)據(jù)
- jQuery提交表單ajax查詢實(shí)例代碼
- jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新
- jQuery基于Ajax方式提交表單功能示例
- 一些jQuery表單實(shí)例 Ajax表單判斷代碼打包
相關(guān)文章
jQuery訪問瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法
cookie,localStorage和sessionStorage都是瀏覽器本地存儲(chǔ)數(shù)據(jù)的地方,其用法不盡相同,今天小編通過本文給大家分享jQuery訪問瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法,需要的朋友參考下吧2017-10-10innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的,jquery是多此一舉了,直到我遇到一次問題2012-10-10jQuery插件HighCharts繪制2D金字塔圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D金字塔圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制金字塔圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery1.4 教程一 便利的設(shè)置函數(shù)
jquery1.4已經(jīng)發(fā)布了,1.4相對于1.32的改進(jìn)還是非常巨大的,可以說是全面性的,性能也全面超越了1.32。這一周,將一一展示jquery1.4的改進(jìn),同時(shí)也會(huì)放出相應(yīng)的demo。2010-02-02