jQuery提交表单ajax查询实例代码


Posted in Javascript onOctober 07, 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库与其他JS库冲突的解决办法
Feb 07 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 #Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 #Javascript
Javascript操作cookie的函数代码
Oct 03 #Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 #Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 #Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 #Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 #Javascript
You might like
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
js实现常用排序算法
2016/08/09 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
Python正则表达式介绍
2012/08/06 Python
Python IDLE入门简介
2017/12/08 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Python中return self的用法详解
2018/07/27 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
擅自离岗检讨书
2014/02/11 职场文书
汇源肾宝广告词
2014/03/20 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python