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部分:
代码如下:
<p id="lmain">
<p><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></p>
<p><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></p>
<p style=" text-align:center;"><input type="button" id="btnsubmit" value="查询" /> </p>
</p>
<p id="msg" style=" width:600px;text-align:center; margin-top:20px;"></p>
推荐阅读
-
vue组件表单数据回显验证及提交的实例代码
-
Jquery基于Ajax方法自定义无刷新提交表单Form实例
-
AJAX提交表单数据实例分析
-
jQuery ajax中使用serialize()方法提交表单数据示例
-
向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分
-
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
-
Ajax提交Form表单及文件上传的实例代码
-
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
-
jquery ajax方式直接提交整个表单核心代码
-
jquery ajax异步提交表单数据的方法