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>

　　
原文:http://tanteng.sinaapp.com/2012/05/jquery-ajax/