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 相关文章推荐
document.compatMode介绍
May 21 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
javascript常用的方法分享
Jul 01 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
js实现录音上传功能
Nov 22 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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中的比较运算符详解
2013/10/28 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
js中top的作用深入剖析
2014/03/04 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python编写一个闹钟功能
2017/07/11 Python
python flask实现分页的示例代码
2018/08/02 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
学习python的前途 python挣钱
2019/02/27 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
大学生党课思想汇报
2013/12/29 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
apache ftpserver搭建ftp服务器
2022/05/20 Servers