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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 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获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python圣诞树编写实例详解
2020/02/13 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
办公室主任先进事迹
2014/01/18 职场文书
留学经费担保书
2014/05/12 职场文书
工厂车间标语
2014/06/19 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
工作证明英文模板
2014/10/21 职场文书
2016寒假假期总结
2015/10/10 职场文书
分析Python list操作为什么会错误
2021/11/17 Python