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 09 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
Smarty使用自定义资源的方法
2015/08/08 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
js 操作符实例代码
2009/10/24 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python类的实例化问题解决
2019/08/31 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
金融管理毕业生求职信
2014/03/03 职场文书
环保倡议书范文
2014/05/12 职场文书
2014年党建工作总结
2014/11/11 职场文书
八一建军节慰问信
2015/02/14 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android