JQuery学习日志一(验证用户名是否重复AJAX)

本文转载自 fzjiangmin 查看原文 2010/06/18 0 stylesheet/ 验证/ function/ 服务器/ 用户名/ ajax/ jquery/ javascript

JS代码：

/* * 需要通过Javascript代码来做两件事情 * 1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，这样用户就可以看到结果 * 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留 * *//* * 需要在页面装载完成是注册上这些工作 * */$(document).ready(function() {//这里面的内容就是页面装载完成后需要执行的代码var userNameNode = $("#userName");//需要找到button按扭，注册事件$("#verifyButton").click(function() {//1.获取文本框的内容var userName = userNameNode.val();//2.将这个内容发送给服务器端if (userName == "") {alert("用户名不能为空");} else {$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){//3.接收服务器端返回的数据，填充到div中$("#result").html(response);});}});//需要找到文本框，注册事件userNameNode.keyup(function(){//获取当前文本框中的内容var value = userNameNode.val();if (value == "") {//让边框变成红色，并且带背景图userNameNode.addClass("userText");} else {//去掉边框和背景图userNameNode.removeClass("userText");}});});

CSS代码：

.userText {/*控制文本框的边框是红色的实线*/border: 1px solid red;background-image: url(../images/userVerify.gif);background-repeat: repeat-x;background-position: bottom;}

HTML代码：

<html><head><title>JQuery实战1-用户名校验</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/userVerify.css" mce_href="css/userVerify.css" /><mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script><mce:script type="text/javascript" src="js/userVerify.js" mce_src="js/userVerify.js"></mce:script></head><body>请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" /><div id="result"></div></body></html>

服务端JAVA代码：

response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String param = request.getParameter("userName"); if (param == null || param.length() == 0) { out.println("用户名不能为空"); } else { String userName = URLDecoder.decode(param, "UTF-8"); if (userName.equals("wangxingkui")) { out.println("用户名[" + userName + "]已经存在，请使用别的用户名注册"); } else { out.println("可以使用用户名[" + userName + "]注册"); } } } finally { out.close(); }

学习总结：

1） HTML负责页面，CSS负责样式，JS负责页面行为；

2）可以预先定义DIV或者SPAN节点来显示服务端返回的数据；

3）可以通过#idname或者.classname来定制HTML页面的样式；

4）可以通过$(document).ready(function(){ })的方式来定义页面装载完成后需要执行的方法；

5）可以通过$()来获取页面的指定节点，参数是某种CSS的选择器。例如：$("#username")获取页面上ID为username的节点；

$("table tr")获取table元素节点下所有的tr节点；

6）可以在$()返回的JQuery对象上执行各种JQuery的方法。例如：$("#verifyButton").click(function(){});

7） val()方法可以获得节点的value属性值；

8） html()方法可以获得某个节点中的html内容；

9） click()方法可以相应鼠标点击事件；

10） keyup()方法可以相应键盘弹起事件；

11） $().get方法可以以AJAX的方式与服务器进行交互，注册的callback()方法会在数据返回时被调用；

12） addClass()或removeClass()可以给某一节点添加或者删除一个class；

13）发送给服务器端的数据在javascript中做两次encodeURI，然后在服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文乱码问题；

智能推荐

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

猜您在找

用Ajax实现的验证用户名是否重复实例使用ajax验证用户名是否重复 Ajax+JQuery查询用户名是否重复 jQuery ajax简单案例-验证用户名是否可用 Ajax练习：使用jQuery验证用户名是否存在

赞助商链接

JQuery学习日志一(验证用户名是否重复AJAX)

注意！

赞助商广告