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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
Vue中的无限加载vue-infinite-loading的方法
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文本数据库的搜索方法
2006/10/09 PHP
PHP学习之PHP变量
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
使用python绘制常用的图表
2016/08/27 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python 处理string到hex脚本的方法
2018/10/26 Python
对python:print打印时加u的含义详解
2018/12/15 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python实现像awk一样分割字符串
2020/09/15 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
保密普查工作实施方案
2014/02/25 职场文书
商务助理求职信范文
2014/04/20 职场文书
小学学校评估方案
2014/06/08 职场文书
安全例会汇报材料
2014/08/23 职场文书
忠诚教育心得体会
2014/09/03 职场文书
秋冬农业生产标语
2014/10/09 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript