jQuery提交表单ajax查询实例代码
jQuery提交表单ajax查询实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:看一个用jQuery提交表单ajax查询的例子。基本功能:用户输入一个表单,输入准考证和验证码,验证用户是否输入表单,点击查询提交,然后从服...

看一个用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>准考证号:</span><span><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>验证码:</span><span><input id="Yzm" name="Yzm" type="text" value="" /><img id="valiCode" src="../Validate/GetValidateCode" alt="看不清?点击更换" /></span></div>

<div><input type="button" id="btnSubmit" value="查询" /> </div>

</div>

<div id="msg"></div>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类