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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
js闭包的用途详解
Nov 09 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
基于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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
python从入门到精通(DAY 2)
2015/12/20 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
深入浅析python with语句简介
2018/04/11 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
生产内勤岗位职责
2013/12/07 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
小石潭记导游词
2015/02/03 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS