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

最新推荐文章于 2019-01-27 10:55:53 发布

fzjiangmin

最新推荐文章于 2019-01-27 10:55:53 发布

阅读量5.8k

点赞数

分类专栏： JQuery 文章标签： jquery ajax function 服务器 stylesheet javascript

本文链接：https://blog.csdn.net/fzjiangmin/article/details/5678894

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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,可以解决中文乱码问题；

fzjiangmin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
JQuery学习日志一(验证用户名是否重复AJAX)

JS代码：/* * 需要通过Javascript代码来做两件事情 * 1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，这样用户就可以看到结果 * 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留 * *//* * 需要在页面装载完成是注册上这些工作 * */$(document).ready(function() { //这里
复制链接

扫一扫