提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

jQueryAjax提交表单查询获得数据实例代码

实例数据代码 查询 获得 提交 表单 JqueryAJAX
2023-06-13 09:14:35 时间
看一个用jQuery提交表单ajax查询的例子。
基本功能：用户输入一个表单，输入准考证和验证码，验证用户是否输入表单，点击查询提交，然后从服务器得到返回的数据并显示出来。

代码如下：

jQuery部分：
复制代码代码如下:

<scriptlanguage="javascript"type="text/javascript">
$(document).ready(function(){
$("#btnSubmit").click(function(){
Login();
});
});
functionLogin(){
if(Check()){
LoginSuccess();
}
}
functionCheck(){
if($("#ksbh").val()==""){
alert("准考证号不能为空！");
$("#ksbh").focus();
returnfalse;
}
if($("#Yzm").val()!=$.cookie("ValidateCode")){
alert("验证码错误！")
$("#Yzm").focus();
returnfalse;
}
returntrue;
}
functionLoginSuccess(){
$.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部分:

复制代码代码如下:

<divid="lmain">
<div><spanclass="s1">准考证号：</span><spanclass="s2"><inputid="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><spanclass="s1">验证码：</span><spanclass="s3"><inputid="Yzm"name="Yzm"type="text"value=""/><imgid="valiCode"style="cursor:pointer;height:22px;line-height:22px;vertical-align:middle;"src="../Validate/GetValidateCode"onclick="this.src=this.src+"?""alt="看不清？点击更换"/></span></div>
<divstyle="text-align:center;"><inputtype="button"id="btnSubmit"value="查询"/></div>
</div>
<divid="msg"style="width:600px;text-align:center;margin-top:20px;"></div>

相关文章