金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 深入浅出,Ajax提交表单查询获得数据实例代码

深入浅出,Ajax提交表单查询获得数据实例代码

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-09-04 22:38

 1.  概述

看三个用jQuery提交表单ajax查询的例证。
基本成效:客商输入二个表单,输入准考证和验证码,验证客户是或不是输入表单,点击查询提交,然后从服务器获得重临的数目并呈现出来。

看三个用jQuery提交表单ajax查询的例子。
基本功能:客商输入三个表单,输入准考证和验证码,验证客商是不是输入表单,点击查询提交,然后从服务器获得重临的多少并浮现出来。

复制代码 代码如下:

                   一种新工夫、新构思的出现都是因为它更方便人民群众了群众的急需,消除了近期的一部分标题,它发出的同一时候有益处也可以有坏处,要看我们什么选择。

代码如下:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
    <title></title>
   <!-- 注意引用顺序-->
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
    <script src="messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
//        $(function () {
//            $('#a').validate({
//                rules: {
//                    username: { required: true, minlength: 6, maxlength: 12 },
//                    email: { required: true, email: true }
//                },
//                errorshow: function (error, element) {
//                    error.appendTo(element.siblings('span'));
//                }

 

jQuery部分:

jQuery部分:

//            })

                   前面早就给大家介绍了JavaScript脚本语言,它在异常的大程度上救助Web开拓者提升了浏览器的相互本领和动态效果,可是随着网络的迅猛进步,不可能满足客户对于页面包车型大巴展现情势和顾客体验度的热切须求,于是有的牛X的群众对JavaScript做了越来越包裹、扩大,创立了二个有力的JavaScript代码库,起名称叫JQuery。

复制代码 代码如下:

复制代码 代码如下:

        //        })
        $(function () {
            $('#a').validate({
                rules: {
                    username: { required: true, minlength: 6, maxlength: 12 },
                    email: { required: true, email: true },
                    pwd: { required: true, rangelength:[6,6] },
                    again: { required: true, equalTo: ($('#aa')) }, //这里一定是id
                    birthday:{date:true},
                    blood:{digits:true}
                },
                errorshow: function (error, element) {
                    error.appendTo(element.siblings('span'));
                }

 

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

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

            })

                   最早,它是由一个比利时人所创立的叁个开源项目,慢慢的更加多的人使用而流行起来,它的焦点是:以越来越少的代码,完毕越多的成效即(Write Less ,Do More)。

htm部分:

htm部分:

        })
    </script>
</head>

 

复制代码 代码如下:

复制代码 代码如下:

<body>
<form  id="a">
<div>
用户名:<input type="text" name="username" /><span style="width:100px"></span>
<br />
邮箱:<input type="text" name="email" /><span style="width:100px"></span>
<br />
密码:<input type="text" name="pwd" /><span style="width:100px" id="aa"></span>
<br />
确认密码:<input type="text" name="again"  /><span style="width:100px"></span>
<br />
生日:<input type="text" name="birthday" /><span style="width:100px"></span>
<br />
血压:<input type="text" name="blood" /><span style="width:100px"></span>
</div>
</form>
</body>
</html>

                   使用在此以前须要利用JQuery库文件。

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

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

你大概感兴趣的小说:

  • jQuery验证插件 Validate详解
  • JQuery扩充插件Validate—4设置错误提醒的样式
  • JQuery增加插件Validate—6 radio、checkbox、select的认证
  • JQuery扩大插件Validate 5加多自定义表明措施
  • jValidate 基于jQuery的表单验证插件
  • jQuery验证插件validate使用情势详解
  • jQuery插件Validate完成自定义校验结果样式
  • jQuery插件Validate落成自定义表单验证
  • Jquery插件 easyUI属性汇总
  • Jquery插件之多图片异步上传
  • jQuery Dialog 弹出层对话框插件
  • 刚烈推荐240多少个jQuery插件提供下载
  • 享用20几个很棒的jQuery 文件上传插件或学科
  • jQuery validate插件功效与用法详解

                   JQuery库文件能够从此间下载:www.jquery.com

你大概感兴趣的文章:

  • jquery ajax提交表单数据的三种艺术
  • jQuery使用ajaxSubmit()提交表单示例
  • jQuery ajax中选取serialize()方法提交表单数据示例
  • jquery ajax验证不经过也付出表单难点管理
  • jquery ajax提交表单数据的三种完成格局
  • Jquery基于Ajax方法自定义无刷新提交表单Form实例
  • jquery ajax 怎样向jsp提交表单数据
  • jQuery提交表单ajax查询实例代码
  • jQuery ajaxSubmit 完毕ajax提交表单局地刷新
  • jQuery基于Ajax格局交给表单作用示例
  • 部分jQuery表单实例 Ajax表单剖断代码打包

基本功用:顾客输入三个表单,输入准考证和验证码,验证客商是还是不是输入表单,点击查询提交,然后...

       2. 兑现主要功能

                   a.控制DOM、CSS

                   b.管理页面事件

                   c.大批量插件在页面中利用

                   d.完美组合Ajax

 

       3. 风格

                日币符号$

               事件操作链式写法

                      编写页面某成分的风云时,能够行使链式书写,使得代码更简洁.

       4. 着力语法

 

[javascript] v 

<span style="font-size:18px;">// JavaScript Document  

//第一种写法  

$(document).ready(function(){         

      //代码段  

                 });  

//第三种写法  

$(function(){  

    //代码段  

        });</span>  

                  上述三种写法是一样的,那么它们如何意思呢?既然JQuery是JavaScript的扩展,在JavaScript中会有与之对应的代码,看上面代码:

[javascript]  

<span style="font-size:18px;">window.onload=function(){  

      //代码段  

                        };</span>  

                  区别:

                          试行时间差别

                                 Jquery是在Jquery库加载达成后推行,而JavaScript是在页面全体加载完后实行,分明,前面一个实践作用高些。

                          执行多少不等

                                 他们都得以实行多次,不过Jquery每一回都会有出口结果,而JavaScript只会有三遍输出结果。

 

       5. 访问调整DOM、CSS实例

               看下边代码完毕了给按键绑定单击事件,当单击时自动获得文本框、单选按键值,然后呈现在叁个DIV标签中。

[html] 

<span style="font-size:18px;"><head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>控制DOM</title>  

<!--JavaScript代码-->  

<script type="text/javascript" src="jquery.js"></script>  

<script  type="text/javascript" >  

  

    $(function(){  

        $("#btnSubmit").click(function(){  

          

            //获取文本框的值  

            var txtValue=$("#txtName").val();  

              

            //获取单选按键值  

            var radValue=$("#radSex1").is(":checked")?"男":"女";  

            //呈现文本框内容和值  

            $("#tip").css("display","block").html(txtValue "<br>" radValue);  

              

        });  

    });  

      

</script>  

<!--CSS代码-->  

<style type="text/css">  

  

</style>  

</head>  

<body>  

    <div class="Frame">  

        <div class="Title">  

            输入如下音信:  

        </div>  

        <div class="Content">  

            姓名:<input id="txtName" type="text" class="txtCss"/>  

            性别:<input name="rad" type="radio" class="radio" id="radSex1" value="男"/>  

            男  

                  <input  name="rad" id="radSex" type="radio" value="女"/> 女  

        </div>  

        <div class="Btn">  

            <input id="btnSubmit" type="button" value="提交" class="btnCss" />  

        </div>  

  

    </div>      

    <div id="tip">  

          

    </div>  

</body>  

</html></span>  

 

                  通过JQuery能够轻易的找到HTML成分,然后,实行各式操作不用采取GetElementById等办法先物色出来,当有大多轩然大波供给增添时,也不需分别增进,只必要用链式往上丰裕就能够。

                   看一下来得效果:

          金沙棋牌官方平台 1   

               代码里还用到了一种JQuery选用器:属性过滤采纳器(:checked),获取表单中有所入选的要素,重返多个数组,愈来愈多选取器应用将要下一篇博客介绍。

 

 

 

. 概述 一种新技巧、新思量的产出都以因为它更便宜了大家的内需,消除了方今的有的主题素材,它发生的还要有裨益也是有缺陷,要看我们怎么样...

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:深入浅出,Ajax提交表单查询获得数据实例代码

关键词:

上一篇:没有了

下一篇:没有了