ajax应用

ajax应用

一、异步校验用户名是否存在

1.需求：

2.代码：

JQ代码：

<script type="text/javascript">
    $(function(){

        //为输入框绑定事件
        $("#username").blur(function(){
            //1、失去焦点获得输入框的内容
            var usernameInput = $(this).val();
            //2、去服务端校验该用户名是否存在---ajax
            $.post(
                "${pageContext.request.contextPath}/checkUsername",
                {"username":usernameInput},
                function(data){
                    var isExist = data.isExist;
                    //3、根据返回的isExist动态的显示信息
                    var usernameInfo = "";
                    if(isExist){
                        //该用户存在
                        usernameInfo = "该用户名已经存在";
                        $("#usernameInfo").css("color","red");
                    }else{
                        usernameInfo = "该用户可以使用"
                        $("#usernameInfo").css("color","green");
                    }
                    $("#usernameInfo").html(usernameInfo);

                },
                "json"
            );

        });

    });
</script>

HTML代码：

<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
    <input type="text" class="form-control" id="username"
        placeholder="请输入用户名">
    <span id="usernameInfo"></span>
</div>

服务端代码：

public class CheckUsernameServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //获得要校验的用户名
        String username = request.getParameter("username");

        //传递username到service
        UserService service = new UserService();
        boolean isExist = false;
        try {
            isExist = service.checkUsername(username);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        response.getWriter().write("{\"isExist\":"+isExist+"}");

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

二、站内搜索

JS代码：

<!-- 完成异步搜索 -->
<script type="text/javascript">

    function overFn(obj){
        $(obj).css("background","#DBEAF9");
    }
    function outFn(obj){
        $(obj).css("background","#fff");
    }

    function clickFn(obj){
        $("#search").val($(obj).html());
        $("#showDiv").css("display","none");
    }


    function searchWord(obj){
        //1、获得输入框的输入的内容
        var word = $(obj).val();
        //2、根据输入框的内容去数据库中模糊查询---List<Product>
        var content = "";
        $.post(
            "${pageContext.request.contextPath}/searchWord",
            {"word":word},
            function(data){
                //3、将返回的商品的名称 显示在showDiv中
                //[{"pid":"1","pname":"小米 4c 官方版","market_price":8999.0,"shop_price":8999.0,"pimage":"products/1/c_0033.jpg","pdate":"2016-08-14","is_hot":1,"pdesc":"小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待 官方好好","pflag":0,"cid":"1"}]

                if(data.length>0){
                    for(var i=0;i<data.length;i++){
                        content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
                    }
                    $("#showDiv").html(content);
                    $("#showDiv").css("display","block");
                }

            },
            "json"
        );

    }
</script>

HTML代码：

<form class="navbar-form navbar-right" role="search">
    <div class="form-group" style="position:relative">
        <input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
        <div id="showDiv" style="display:none; position:absolute;z-index:1000;background:#fff; width:179px;border:1px solid #ccc;">

        </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

服务端代码：

public class SearchWordServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //获得关键字
        String word = request.getParameter("word");

        //查询该关键字的所有商品
        ProductService service = new ProductService();
        List<Object> productList = null;
        try {
            productList = service.findProductByWord(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        //["xiaomi","huawei",""...]

        //使用json的转换工具将对象或集合转成json格式的字符串
        /*JSONArray fromObject = JSONArray.fromObject(productList);
        String string = fromObject.toString();
        System.out.println(string);*/

        Gson gson = new Gson();
        String json = gson.toJson(productList);
        System.out.println(json);

        response.setContentType("text/html;charset=UTF-8");

        response.getWriter().write(json);


    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request, response);

    }