jQuery Ajax提交表单查询获得数据实例代码


Posted in Javascript onSeptember 19, 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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
基于JQuery的多标签实现代码
Sep 19 #Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 #Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 #Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 #Javascript
You might like
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
详解python爬虫系列之初识爬虫
2019/04/06 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
公司管理建议书范文
2014/03/12 职场文书
租房协议书
2014/04/10 职场文书
校园安全广播稿范文
2014/09/25 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
四则混合运算教学反思
2016/02/23 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android