Ajax (Asynchronous javascript xml) 搜索框核心…

2018-06-18 01:55:58来源：未知阅读 ()

前端

<script type="text/javascript">
$(function(){
    $("#tid").keyup(function(){
        //获取当前输入 的值
        var value=$(this).val();
        //偷偷摸摸发起请求
        var url="${pageContext.request.contextPath }/like"
        var params="name="+value;
        //先清空下方div
        $("#did").empty();
        $("#did").hide();
        if(value){
            //有输入值才发请求
            $.post(url,params,function(data){
                
/*                 $.each(data,function(index,element){
                    var content=element.name;
                    var div="<div onmouseover='m1(this)' onmouseout='m2(this)' onclick='m3(this)' style='text-align:left;'  >"+content+"</div>";
                    $("#did").append(div);    
                });
                $("#did").show() */
                
                $(data).each(function(index,element){
                    alert(element.name);
                    var div="<div style='text-align:left' onmouseover='m1(this)' onmouseout='m2(this)' onclick='m3(this)'>"+element.name+"</div>";
                    $("#did").append(div);
                })
                $("#did").show();    
                    
                
                
            },"json")
        }
    })
})

function m1(obj){
    //修改css样式
    $(obj).css("background-color","#ccc");
}
function m2(obj){
    $(obj).css("background-color","white");
}
function m3(obj){
    //选中  把自己添加到输入框中
    var text=$(obj).text();
    $("#tid").val(text);
    $("#did").empty();
    $("#did").hide();
}

</script>

后端返回给前端的内容在$.post这个Ajax请求的第三个参数function(data)的data中

data的数据交换格式是json

json有数组[value,value ]和对象{"key":value,"key":value }两种形式其中value可以为任意类型,所以就出现了各种千变万化的组合,解析的时候看外层 (使用json-lib jar包)

后端

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            // 编码
            response.setContentType("text/html;charset=utf-8");
            // 获取name参数
            String name = request.getParameter("name");
            // 调用service查询相关
            List<KeyWord> keys = new KeyWordservice().findByName(name);
            // 写回去给你
            for (KeyWord key : keys) {
                System.out.println(key);
            }
            JSONArray key_json = JSONArray.fromObject(keys);
            System.out.println(key_json);
            response.getWriter().print(key_json.toString());
        } catch (SQLException e) {
            e.printStackTrace();
            response.getWriter().print("");
        }
    }

Ajax判断用户名存在核心代码(使用JQuery)

 <script>
 
     //页面加载
     $(function(){
         $("#errorId").hide();
        $("#successId").hide();
         
         
         $("#username").blur(function(){
             $("#errorId").hide();
             $("#successId").hide();
             //获得值
             var username = $("#username").val();
             
                 if(username){
                      //ajax访问服务器
                      $.get("${pageContext.request.contextPath}/CheckUserNameServlet","username="+username,function(data){
                          if(data>0){
                              //失败
                              $("#errorId").show();
                              $("#successId").hide();
                          }else{
                              //成功
                              $("#errorId").hide();
                              $("#successId").show();
                          }
                      });
                 }
         });
     })
 
 </script>

     <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                </div>
                <div class="col-sm-4">
                    <span id="successId" class="label label-success">用户名可用</span>
                    <span id="errorId" class="label label-danger">用户名不可用</span>
                </div>
              </div>

附:原生js的Ajax代码

    <input type="button" onclick="sendGet()" value="请求"/> <br/>
    
    <script type="text/javascript">
        function sendGet(){
            
            //1 获得ajax引擎
            var xmlhttp=null;
            // 谷歌、火狐、IE最新浏览器
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else if (window.ActiveXObject){
                //IE老版本浏览器（IE6、7、8 等）
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            
            //2 设置回调函数
            xmlhttp.onreadystatechange = function(){
                
                alert(xmlhttp.readyState);
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        alert("响应数据" + xmlhttp.responseText);
                    }
                }
            };
            //3 确定请求方式、路径及参数
            /* xmlhttp.open("GET","/2level_daan/hello?username=jack&password=1234"); */
            xmlhttp.open("POST","/2level_daan/hello");
            
            //4 设置请求编码
            xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//get 不需要

            
            //4 发送请求
            /* xmlhttp.send(null); */
            xmlhttp.send("username=杰克&password=1234");

        }
    </script>