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实现仿Windows关机效果
Mar 10 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
RequireJS使用注意细节
May 15 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
SSI指令
2006/11/25 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
js编写选项卡效果
2017/05/23 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
文艺晚会主持词
2014/03/24 职场文书
建筑横幅标语
2014/10/09 职场文书
党校党性分析材料
2014/12/19 职场文书
倡议书的格式写法
2015/04/28 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS