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中的缓动效果实现程序
Dec 29 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
VUE中使用MUI方法
Feb 12 Javascript
vue按需加载实例详解
Sep 06 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
vue实现信息管理系统
May 30 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&amp;&amp;mysql)六
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python编程中装饰器的使用示例解析
2016/06/20 Python
python高阶爬虫实战分析
2018/07/29 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
3种python调用其他脚本的方法
2020/01/06 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
工程部主管岗位职责
2013/11/17 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
教师节活动主持词
2014/04/02 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2015年女工委工作总结
2015/07/27 职场文书
学生会自荐信
2019/05/16 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis