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 使用手册(五)
Sep 23 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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
php操作SVN版本服务器类代码
2011/11/27 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
浅谈Python的list中的选取范围
2018/11/12 Python
pow在python中的含义及用法
2019/07/11 Python
python批量修改xml属性的实现方式
2020/03/05 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
课程设计心得体会
2013/12/28 职场文书
索桥的故事教学反思
2014/02/06 职场文书
工作说明书格式
2014/07/29 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
详解TypeScript的基础类型
2022/02/18 Javascript