js實例教程-jQuery提交表單ajax查詢實例代碼

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-jQuery提交表單ajax查詢實例代碼脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

看一個用jQuery提交表單ajax查詢的例子。
基本功能:用戶輸入一個表單,輸入准考證和驗證碼,驗證用戶是否輸入表單,點擊查詢提交,然後從服務器得到返回的數據並顯示出來。
代碼如下:
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("准考證號不能為空!");
$("#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部分:

代碼如下:


<p id="lmain">
<p><span class="s1">准考證號:</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></p>
<p><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></p>
<p style=" text-align:center;"><input type="button" id="btnSubmit" value="查詢" /> </p>
</p>
<p id=";msg" style=" width:600px;text-align:center; margin-top:20px;"></p>

看一個用jQuery提交表單ajax查詢的例子。
基本功能:用戶輸入一個表單,輸入准考證和驗證碼,驗證用戶是否輸入表單,點擊查詢提交,然後從服務器得到返回的數據並顯示出來。
代碼如下:
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("准考證號不能為空!");
$("#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部分:

代碼如下:


<p id="lmain">
<p><span class="s1">准考證號:</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></p>
<p><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></p>
<p style=" text-align:center;"><input type="button" id="btnSubmit" value="查詢" /> </p>
</p>
<p id="msg" style=" width:600px;text-align:center; margin-top:20px;"></p>

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦!&nbsp;js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-jQuery提交表單ajax查詢實例代碼全部内容,希望文章能够帮你解决js實例教程-jQuery提交表單ajax查詢實例代碼所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。