Ajax (Asynchronous javascript xml) 搜索框核心代碼(JQuery) Ajax判斷用戶名存在核心代碼 附:原生js的Ajax代碼 其中有json的一句話解釋

前端

<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>