jQuery - jQuery get 메서드 + 일반 프로세서 텍스트 상자 내용 처리

3092 단어 JavaScriptjquery
인터넷에서 흔히 볼 수 있는 이러한 상호작용 방식은 한 사이트에 가서 사용자 이름을 등록할 때 텍스트 상자에 데이터를 입력하지 않았거나 데이터 입력의 내용 형식이 틀리면 텍스트 상자를 빨간색으로 바꾸어 입력한 내용이 틀렸다는 것을 알린다.
스스로 이 텍스트 상자의 검증 방식을 바꾸고 get 방법으로 데이터 처리를 했습니다: 1.제출 단추를 눌렀을 때 텍스트 상자가 비어 있으면 텍스트 상자가 빨간색 테두리로 변합니다.2. 다시 입력하면 텍스트 상자의 빨간색 테두리가 사라지고 입력한 후 제출을 누르십시오.3. jquery의 get 방법을 이용하여 백엔드 일반 처리 프로그램을 호출하여 백엔드의 데이터를 처리하고 처리한 후에 값을 백엔드로 되돌려줍니다.
코드:
html 코드:
<body>
		<link type="text/css" rel="stylesheet" href="css/userVerify.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/userVerify.js"></script>
    <form id="form1" runat="server">
    <div>
              :
        <input id="txtUserName" type="text"/><input id="btnOk" type="button" value="  " />
    </div>
        <div id="result">
        </div>
    </form>
</body>

js 코드: 두 개의 이벤트를 등록했습니다.제출 버튼을 클릭하여 이벤트를 클릭합니다.2. 텍스트 상자 keyup 이벤트.
$(document).ready(function () { 
    //  button  ,    
    $('#btnOk').click(function () {
        //  txtUserName   
        var txtUser = $("#txtUserName");
        //       
        var userName = txtUser.val();
        //          
        if (userName.trim() == "") {   //           
            $("#txtUserName").addClass("usertext")//       class,       
        } else {
            //  get       
            $.get("HtmlPage1.ashx", { username: userName }, function (data) {
                //                 div 
                $("#result").html(data);
            });
        }
    });

    //  txtUserName   ,    
    $('#txtUserName').keyup(function () {
        //          
        var value = $(this).val();
        if (value!="") {
            //     class,        
            $(this).removeClass("usertext");
        }
    });
});

일반 프로세서 코드:
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string strUserName = context.Request.QueryString["username"]; //     username
            if (strUserName == "yq")
            {
                context.Response.Write("      ");   //    
            }
            else
            {
                context.Response.Write("    :" + strUserName);   //    
            }
        }

css 코드:
.usertext {
    border:1px solid red;
    /*           */
    background-image:url(../imge/userVerify.gif);
    background-repeat:repeat-x;
    background-position:bottom;
}

요약:
전체 실례 코드는 두 부분으로 나눌 수 있다.jQuery의removeClass,ddClass 방법을 이용하여 텍스트 상자의 스타일을 제어합니다.2. jQuery의 get 방법을 이용하여 텍스트 상자의 내용을 백엔드에 전송하여 처리한다.
소스 주소:http://download.csdn.net/detail/suneqing/7424611

좋은 웹페이지 즐겨찾기