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

为什么使用Ajax

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

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

 

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 ο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();
    }