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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
浅谈vue的第一个commit分析
Jun 08 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
同时提取多条新闻中的文本一例
2006/10/09 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
vue实现跨域的方法分析
2019/05/21 Javascript
js实现弹窗效果
2020/08/09 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
二年级评语大全
2014/04/23 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript