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


Posted in Javascript onSeptember 19, 2012

看一个用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>
Javascript 相关文章推荐
jquery动态改变div宽度和高度
Feb 09 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
15分钟上手vue3.0(小结)
May 20 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
基于JQuery的多标签实现代码
Sep 19 #Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 #Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 #Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python中PIL安装简单教程
2016/04/21 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
婚纱摄影师求职信
2014/03/07 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
代办委托书怎样写
2014/04/08 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
建议书的格式及范文
2015/09/14 职场文书
初中团支书竞选稿
2015/11/21 职场文书
《去年的树》教学反思
2016/02/18 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle