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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
浅谈js的异步执行
Oct 18 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
bootstrap表单示例代码分享
May 18 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
vue vant中picker组件的使用
Nov 03 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
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
javascript数组详解
2014/10/22 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
Python学生信息管理系统修改版
2018/03/13 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
小学毕业家长寄语
2014/01/19 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
慰问信格式规范
2015/03/23 职场文书
党小组推荐意见
2015/06/02 职场文书
公司借款担保书
2015/09/22 职场文书