javaWeb22(ajax&json的即时自动补全)

一，ajax

可以用到$.ajax也可以jquery.ajax,因为jquery就相当于$;

记得要用到键值对的方式写

比如： 

 $.ajax({
                url:"vname.do",
                data:{sname:name},
                type:"post",
                dataType:"text",
                success:function(data){
                    //alert(data);
                    $("#aa").html(data);
                },
                error:function(){
                    alert("有误")
                }
            });

其要用  ，隔开

 也可以用另一个方法:

$.post     他只返回正确的方法，所以不用写error

$.post("vname.do",{sname:name},function(data){
                 $("#aa").html(data);给span赋值 innerHTML
             },"text")
         })

二，json的即时自动补全

  $(function(){
    	 //让div隐藏
    	 $("#aa").hide();
    	 //给文本框添加失焦事件
    	 $("#sname").keyup(function(){
    		 //让div显示
    		 $("#aa").show();
    		//获取文本框的值
    		var name=$("#sname").val();
    		//第一种$.ajax()
    		/* $.ajax({
    			url:"vname.do",//请求地址（servlet）
    			data:{sname:name},//"sname="+name+"&spwd="+pwd,请求参数
    			type:"post",//请求方式
    			dataType:"text",//预期服务器可能返回的数据类型
    			success:function(data){//成功的回调函数
    				//alert(data);//data是服务器返回的响应
    			    $("#aa").html(data);//给span赋值 innerHTML
    			},
    			error:function(){//失败的回调函数
    				alert("有误")
    			}
    		}); */
    		//第二种$.post()
    		 $.post("autoFill.do",{sname:name},function(data){
    			//把json格式的对象数组字符串---》js的对象数组
    			//var ss=evel(data);//js
    			var ss=$.parseJSON(data);//jQuery
    			//alert(ss.length);
    		 	var sb="<ul>";
    			//循环遍历
    			$.each(ss,function(i,u){//下标 ，元素
    				sb+="<li onclick=\"myf('"+u.uname+"')\" onmouseout=\"this.className='yy'\" onmouseover=\"this.className='xx'\">"+u.uname+"</li>";
    			})
    			 sb+="</ul>"; 
    			//给div赋值
    			 $("#aa").html(sb);  
    		 })
    	 })
     })
     
     function myf(name){
    	 //给文本框赋值
    	 $("#sname").val(name);
    	 //让div隐藏
    	 $("#aa").slideUp(500);
     }

这里用到了两种方法post和ajax

还用到几个事件：keyup（鼠标弹起事件）；onmouseout（鼠标移开事件）； onmouseover（鼠标移上事件）；onclick（点击事件）；

在servlet中要用到json 需要倒包

//将集合解析成字符串
        String str=JSON.toJSONString(ls);

@WebServlet("/autoFill.do")
public class AutoFillServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html; charset=UTF-8");
		//获取out
		PrintWriter out =resp.getWriter();
		//接收客户端传递过来的参数
		String name=req.getParameter("sname");
		//调用biz层的模糊查询方法
		//错误示范 模拟数据
		UserDao ud=new UserDao();
		List<User> ls=ud.getall(name);
		//怎么把集合转成字符串----->json格式的字符串
		StringBuffer sb=new StringBuffer() ;
		/*sb.append("[");
		for(User u:ls) {
			sb.append("{");
			sb.append("\"uname\":\""+u.getUname()+"\",");
			sb.append("\"usex\":\""+u.getUsex()+"\",");
			sb.append("\"uage\":"+u.getUage());
			sb.append("}");
		}
		sb.append("]");*/
		
		//将集合解析成字符串
		String str=JSON.toJSONString(ls);
		
		//由于需要局部刷新 不可用转发 重定向 location.href
		//把响应输送到客户端
		out.write(str);
		out.flush();
		out.close();
	}

记住在里不能用到request，这是异步不能用到跳界面

所以用到out