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 相关文章推荐
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
在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
PHP中调用JAVA
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python实现挑选出来100以内的质数
2015/03/24 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
顶岗实习接收函
2014/01/09 职场文书
八年级物理教学反思
2014/01/19 职场文书
小学生检讨书大全
2014/02/06 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
学生上课说话检讨书
2014/10/25 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis