王刘锁
2018-6-12--JQuery&ajax..
通过今天的学习让我找到了自己的短板.发现自己对JQuery和js&html方面的知识基本为零,今天写案例基本败在jquery语法和属性上,回过头去翻笔记也只能想起个大概,很多还是不理解,找到了短板就要去补上,说一下今天学的ajax,javaScript and xml;一种可以在整个页面不刷新的情况下,只刷新一下部分页面的异步发送请求的技术,不会让我们再浏览网站时网速慢造成的网页卡在空白页现象,局部页面的刷新可以改善用户体验,传统的ajax使用方式做个了结就行,我们主要通过两个案例来学习ajax和jquery的结合使用,第一个案例是实现输入用户名,显示用户名是否已经存在.写一个注册界面,定义一个js文件然后引入到jsp中,在js文件中写代码,首先是jquery的入口函数$(function(){}),然后在入口函数大括号内用id选择器获取用户名文本框并添加失去焦点事件$("#username").blur(function(){}),在事件大括号内先获取输入的用户名,
var username =$(this).val();这里用的jq方式(总是忘记写括号还找不出是这个原因,这方面的知识实在太弱了),然后就是异步请求,$.get("请求路径/web_10/LoginServlet",参数{"username":username},响应结果function(data){});异步的重点就是把响应回来的数据写入到data中,然后用jquery来对data操作,把它显示在页面某一部分,这时我们再后台servlet中做的操作是用传过去的用户名去数据库查找,dao层返回查到的user对象,在servlet中判断user是否为空,为空说明用户名不存在可以注册,不为空说明用户名被占用,再根据这两种情况打印response.getWrit().print(0/1);0代表为空,1代表不为空,这里的打印其实就是打印到data中去了,然后我们可以在上面js文件中的响应结果大括号内写判断if(data==0){}else if(data==1){};分别在大括号内获取到jsp页面中用户名输入文本框后面添加的span标签,并写入文字提示$("#s1").html("想显示的内容为0显示可以使用为1显示不可以使用"),还可以设置不可以使用是注册按钮不可点击获取到按钮$("#bute").attr("disabled",false)-(是否禁用,否)这样这个案例的功能基本实现了,当然记得把js引入jsp中,
然后是第二个案例,仿百度搜索提示功能,思想上优点绕,不太好理解,首先写一个搜索页面,一个文本框,一个按钮,按钮没什么用,定义一个js文件,写代码还是jq入口$(function(){}),然后{}内写输入框的键盘抬起事件$("#text").keyup(function(){});事件括号内获取输入的值,var word =$(this).val();然后异步请求$.post("/web_10/SearchServlet",{"word":word},function(data){});后台通过输入的word去数据库模糊查询,返回一个list结果集合存入request域中转发到一个info.jsp的中间jsp文件,这里要注意的是再定义一个info.jsp.这个jsp中的其它自动生成的代码全部删掉,然后写遍历集合jstl的<c:forEach items="${list}">获取每一个word显示<td>${w.word}</td>,这里转发到info.jsp其实也是把jsp中的代码以字符串的形式写到data中,因为jsp会被翻译成servlet在编译成class文件,最后在Java文件中是print("代码")的形式,这里我们回到响应结果大括号内,开始操作data到搜索框下方隐藏的div中,获取到div$("#d1").show().html(data);这样div就显示出来并写入了info.jsp中的代码,经过浏览器识别执行,显示出查询到的数据,可以加上一个判断如果输入框的值为空就把div隐藏$("#d1").hide();到这里这个功能也基本完成,当然还可以加一些其他的特效.还是要抽空来复习jquery的知识! |