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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
利用JS判断元素是否为数组的方法示例
Jan 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
论建造顺序的重要性
2020/03/04 星际争霸
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php图片上传类 附调用方法
2016/05/15 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
js实现一个简易计算器
2020/03/30 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python端口扫描简单程序
2016/11/10 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python返回数组的索引实例
2019/11/28 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
解决c++调用python中文乱码问题
2020/07/29 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
毕业生个人求职自荐信
2014/02/26 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL