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 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
jQuery选择器全面总结
Jan 06 Javascript
生成二维码方法汇总
Dec 26 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
Openlayers绘制聚合标注
Sep 28 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
VUE+node(express)实现前后端分离
2019/10/13 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
如何用python 操作zookeeper
2020/12/28 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
医大实习自我鉴定
2013/12/07 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
飞屋环游记观后感
2015/06/08 职场文书
身份证丢失证明
2015/06/19 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP