教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jQuery Ajax提交表单查询获得数据实例代码

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

发布时间:2013-09-24   编辑:jiaochengji.com
用户输入一个表单,输入准考证和验证码,验证用户是否输入表单,点击查询提交,然后从服务器得到返回的数据并显示出来
看一个用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部分:

复制代码 代码如下:

<div id="lmain">
<div><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></div>
<div><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></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提交表单查询获得数据实例代码
jQuery提交表单ajax查询实例代码
JQuery的Ajax跨域请求原理概述及实例
Jquery提交表单 Form.js官方插件介绍
jquery获得表单所有数据的实例分享
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
JQuery打造PHP的AJAX表单提交实例
在jQuery ajax中按钮button和submit的区别分析
jquery乱码与contentType属性设置问题解决方案
php中json的跨域实例分析

关键词: Ajax  提交表单   
[关闭]
~ ~