ajax json实现自动补全

为什么使用Ajax?

无刷新：不刷新整个页面，只刷新局部

无刷新的好处: 只更新部分页面，有效利用带宽，提高用户体验

什么是Ajax?

Asynchr onous 异步的 JavaScript And Xml

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

JavaScript：更新局部的网页 XML：一般用于请求数据和响应数据的封装 XMLHttpRequest对象：发送请求到服务器并获得返回结果 CSS：美化页面样式 异步：发送请求后不等返回结果，由回调函数处理结果

通过 HTTP 请求加载远程数据。$.ajax()

通过远程 HTTP POST 请求载入信息。 $.post()

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

 ​​​​​(1)

$(function(){
    //给文本框添加失焦事件
    $("#sname").blur(function(){
        //获取文本框 的值
        var name=$("#sname").val();
        //一、$.ajax()
         $.ajax({
            url:"vname.do",//请求地址 servlet
            data:"iname="+name,//"iname="+name, 请求参数(传递到服务器)
            type:"post",//请求参数
            dataType:"text",//预期服务器可能返回的数据类型 
            success:function(data){//成功的回调函数 data是服务器返回的数据
                //alert(data);
                $("#aa").html(data);//innerHTML 给span赋值
            },
            error:function(){//失败的回调函数
                alert("有误");
            }
        }); 
        //二、$.post()  url,data,success,[dataType]
        /* $.post("vname.do", {iname:name}, function(data) {
            $("#aa").html(data);
        })
         */
    });
})

(2)

$(function(){
    $("#aa").hide();
    //键盘事件
    $("#sname").keyup(function(){
        $("#aa").show();
        var name=$("#sname").val();
        //$.post()  url,data,success,[dataType]
        $.post("autoFill.do", {iname:name}, function(data) {
            var ss=$.parseJSON(data);//jQuery方式
            var sb="<ul>";
            $.each(ss,function(i,u){//下标,用户
                sb+="<li οnclick=\"myf('"+u.uname+"')\" οnmοuseοver=\"this.className='xx'\" οnmοuseοut=\"this.className='yy'\">"+u.uname+"</li>";
            });
            sb+="</ul>";
            //给div赋值
            $("#aa").html(sb);
        })
    });
})

function myf(name) {
    //给文本框赋值
    $("#sname").val(name);
    //让div隐藏
    $("#aa").hide();
}