您的位置:首页 > Web前端 > JQuery

jQuery—— jQuery get方法+一般处理程序处理文本框内容

2017-07-08 09:27 274 查看
网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确。就会将文本框变成红色来提示你输入的内容有误。

自己将这个文本框验证的方式改变了一下,并用到了get方法进行数据处理:1.点击提交button时假设文本框为空,文本框就会变成红色边框。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>
请输入username:
<input id="txtUserName" type="text"/><input id="btnOk" type="button" value="提交" />
</div>
<div id="result">
</div>
</form>
</body>


js代码:注冊了两个事件1.提交button单击事件。

2.文本框keyup事件。

$(document).ready(function () {
//找到button按钮,注冊事件
$('#btnOk').click(function () {
//找到txtUserName文本框
var txtUser = $("#txtUserName");
//获取文本框内容
var userName = txtUser.val();
//将这个内容发给server
if (userName.trim() == "") {   //推断文本框内容是否为空
$("#txtUserName").addClass("usertext")//向文本框中加入class,改变文本框样式
} else {
//利用get方法调用服务端
$.get("HtmlPage1.ashx", { username: userName }, function (data) {
//接受server的返回的数据将数据返回到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;
}


总结:

整个实例代码中。能够分为两部分:1.利用 jQuery的removeClass,addClass方法去控制文本框的样式。

2.利用jQuery的get方法将文本框中的内容,传入后台进行处理。

源代码地址:http://download.csdn.net/detail/suneqing/7424611
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐