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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
完善的jquery处理机制
Feb 21 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
用PHP代码给图片加水印
2015/07/01 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
python传递参数方式小结
2015/04/17 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
2014年劳动部工作总结
2014/12/11 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
python中数组和列表的简单实例
2022/03/25 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers