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 更严格的相等 [译]
Sep 20 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
angular十大常见问题
Mar 07 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
Vue-Router的使用方法
Sep 05 Javascript
详解原生JS动态添加和删除类
Mar 26 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 URL编码解码函数代码
2009/03/10 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
js的对象与函数详解
2019/01/21 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
如何利用Python写个坦克大战
2020/11/18 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
档案保密承诺书
2014/06/03 职场文书
学校欢迎标语
2014/06/18 职场文书
2015年教育实习工作总结
2015/04/24 职场文书