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 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>

赞 (0)

相关推荐

  • jQuery ajax中使用serialize()方法提交表单数据示例

    jQuery ajax中使用serialize()方法提交表单数据示例

    jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({   type: "POST",   url: ajaxCallU

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • jquery ajax提交表单数据的两种实现方法

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能.分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果.如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单.下面完整的介绍一个表单采用ajax方式提交的流程. 一.准备 1.页面引入jQuery文件 2.页面引入jQuery的表单插件jQuery.form.js 二.实施 1.页面中的表单 <

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

  • jQuery Ajax提交表单查询获得数据实例代码

    看一个用jQuery提交表单ajax查询的例子. 基本功能:用户输入一个表单,输入准考证和验证码,验证用户是否输入表单,点击查询提交,然后从服务器得到返回的数据并显示出来. 代码如下: jQuery部分: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#btnSubmit").clic

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • jquery+ajax验证不通过也提交表单问题处理

    validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 复制代码 代码如下: //验证不通过时return      if(!$("form#ajaxForm").val

随机推荐