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 相关文章推荐
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
JS实现日期加减的方法
Nov 29 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
在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 截取字符串专题集合
2010/08/19 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
pandas对指定列进行填充的方法
2018/04/11 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
如何定义TensorFlow输入节点
2020/01/23 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
出纳岗位职责模板
2013/11/27 职场文书
生日宴会策划方案
2014/06/03 职场文书
生物科学专业自荐书
2014/06/20 职场文书
行政复议答复书
2015/07/01 职场文书
python实现高效的遗传算法
2021/04/07 Python
Python3接口性能测试实例代码
2021/06/20 Python