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 遍历对象中的子对象
Jul 03 Javascript
javascript 短路法代码精简
Aug 20 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 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实现购物车功能(下)
2016/01/05 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
BootStrap导航栏问题记录
2017/07/31 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Python打印不合法的文件名
2020/07/31 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python 写一个性能测试工具(一)
2020/10/24 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
工程质量月活动方案
2014/02/19 职场文书
具结保证书
2015/01/17 职场文书
事业单位聘任报告
2015/03/02 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
python字典的元素访问实例详解
2021/07/21 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
利用Python实现模拟登录知乎
2022/05/25 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python