JavaWeb23(ajax+json实现自动补全)

Ajax:只刷新局部页面的技术

Asynchronous 异步的：发送请求后不等返回结果，由回调函数处理结果

JavaScript :更新局部的网页

Xml：使用jQuery的ajax判断用户名是否存在 （$.ajax/$.post）

XMLHttpRequest对象：发送请求到服务器并获得返回结果***(Ajax技术的核心)

使用jQuery的ajax判断用户名是否存在 （$.ajax/$.post）

一、$.ajax()

$.ajax({
			url:"vname.do",//请求地址servlet
			data:{iname:name},//"iname="+name+,请求参数(传递到1服务器)
			type:"post",//请求参数
			dataType:"text",//预期服务器可能返回的类型
			success:function(data){//成功的回调函数data是服务器返回的数据
				$("#aa").html(data);//innerHTML赋值
			}, 
			error:function(){//失败的回调函数
				alert("有误");
			}
		});

二、$.post() url,data,success,dataType

$.post("vname.do",{iname:name},function(data){
			$("#aa").html(data);
		  })
		});

使用JQuery的ajax实现自动补全功能

$(function(){
		//让div隐藏
		$("#aa").hide();
		//给文本框添加失焦事件
		$("#sname").keyup(function(){//键盘事件
		//获取文本框的值
		var name = $("#sname").val;
		//$post() url,data,success,dataType
		$.post("autofill.do",{iname:name},function(data){
			//json格式的对象数组的字符串
			//将json格式的对象数组字符串-->js的对象数组
			//var ss = eval(data);//js方式
			var ss = $.parseJSON(data);//jQuery方式
			var sb = "<ul>";
			//遍历集合
			$.each(ss,function(i,u){//下标，用户
				sb+="<li onclick=\"myf('"+u.uname+"')\" onmouseover=\"this.className='xx'\" onmouseout=\"this.className='yy'\">"+u.uname+"</li>";
		 	  });
			  sb+="</ul>";
			 //给div赋值
			 $("#aa").html(sb);
	    	})
		});
	})
	
	function myf(name){
		//给文本框赋值
		$("#sname").val(name);
		//让div隐藏
		$("#aa").hide();
	}