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下申明对象的几种方法小结
Oct 02 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php类的定义与继承用法实例
2015/07/07 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
党员干部廉洁承诺书
2014/05/28 职场文书
医德医魂心得体会
2014/09/11 职场文书
加强作风建设心得体会
2014/10/22 职场文书
主持人开幕词
2015/01/29 职场文书
如何写辞职书
2015/02/26 职场文书
个人工作能力自我评价
2015/03/05 职场文书
个人年终总结结尾
2015/03/06 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
李强感恩观后感
2015/06/17 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js