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 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
详解AngularJS controller调用factory
May 19 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
图文详解WinPE下安装Python
2016/05/17 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python实现rsa加密实例详解
2017/07/19 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python绘制动态曲线教程
2020/02/24 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
保护环境建议书
2014/03/12 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript