JavaWeb(ajax）简介:

一:如何使用jQuery的ajax即时判断用户名是否可用

1.两种方式:

①:$.ajax()

$.ajax({
                url:"vname.do",//请求地址 servlet
                data:{iname:name},//"iname="+name, 这种传参也行，多个传参之间用&隔开    请求参数(传递到服务器)
                type:"post",//请求参数   默认get   一般post
                dataType:"text",//预期服务器可能返回的数据类型 
                success:function(data){//成功的回调函数 data是服务器返回的数据
                    //alert(data);
                    $("#aa").html(data);//innerHTML 给span赋值
                },
                error:function(){//失败的回调函数
                    alert("有误");
                }

        }); 

②:$.post()

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

用户名：<input type="text" id="sname"><span style="color:red;" id="aa"></span>

二:如何使用jQuery的ajax+json实现自动补全功能

<style type="text/css">
li{list-style: none;}
#aa{border: solid 1px gray;width: 406px;}
.xx{background: yellow;}
.yy{}
</style>

<!-- 引入jQuery的类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
    $(function(){
        //让div隐藏
        $("#aa").hide();
        //给文本框添加失焦事件
        $("#sname").keyup(function(){//键盘事件
            //让div显示
            $("#aa").show();
            //获取文本框 的值
            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();
    }
</script>

<input type="text" id="sname" style="width:400px;">
 <div id="aa"></div>