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 打印页面代码
Mar 24 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Webpack3+React16代码分割的实现
Mar 03 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删除文本文件中重复行的方法
2015/04/28 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
详解vue 命名视图
2019/08/14 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python实现文件复制删除
2016/04/19 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
python PIL模块的基本使用
2020/09/29 Python
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
英语专业自荐书
2014/06/13 职场文书
人代会标语
2014/06/30 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
个人总结与自我评价
2015/02/14 职场文书
交通安全主题班会
2015/08/12 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
Win10 Anaconda安装python-pcl
2022/04/29 Servers