省市联动与搜索提示的简单代码实现

最新推荐文章于 2024-05-30 10:14:11 发布

英雄是怎样练成的

最新推荐文章于 2024-05-30 10:14:11 发布

阅读量5.8k

点赞数 1

分类专栏： Ajax vue 文章标签： vue.js javascript jquery html

本文链接：https://blog.csdn.net/awei19950103/article/details/108824625

版权

Ajax 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

①省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

<!--定义下拉列表-->
<body>
省份：<select id="qaq">
        <option value="">--请选择省份--</option>
      </select>
城市：<select id="wer">
    <option value="">--请选择城市--</option>
    </select>
</body>

<script>
        $.get("ProvinceServlet",{},function (response) {
            var str="<option value=\"\">--请选择省份--</option>";
            for (var i = 0; i <response.length ; i++) {
                //返回省份的json字符串数组，通过遍历这个数组获取每一个元素，给value赋值所对应城市的id
                str+="<option value='"+response[i].provinceID+"'>"+response[i].province+"</option>";
            }
            //使用html方法设置内容会把之前的覆盖，所以在上面用字符串拼接之前的内容
            $("#qaq").html(str);
        });
        //给省份下拉框绑定一个内容改变的事件
        $("#qaq").change(function () {
            //获取选择省份对应的id值
            var val = $("#qaq").val();
            发送异步请求
            $.post("FindCityServlet",{"provinceID":val},function (response) {
                var str="<option value=\"\">--请选择城市--</option>";
                for (var i = 0; i <response.length ; i++) {
                    str+="<option value=''>"+response[i].city+"</option>";
                }
                $("#wer").html(str);
            })
        })
</script>
</html>

②搜索提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <!--嵌套一个div标签，用来展示数据库搜索到的内容-->
        <div id="show" class="show"></div>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //定义一个记号，用于判断是否发送异步请求，解决请求发送过于频繁的问题
    var flag=true;
    //为输入框绑定一个只要有文字输入就发送请求的功能
    $("input[type=text]").on("input",function () {
        //获取文本输入框中的内容
        var value = $("input[type=text]").val();
        if (value) {
            if (flag){
                //获取到值以后dao层的查询的语句为（SELECT NAME FROM USER WHERE NAME LIKE CONCAT('%',#{value},'%') ORDER BY search_count DESC LIMIT 0,4）
                $.post("SearchLikeServlet",{"value":value},function (data) {
                    //定义一个初始的展示数据的div中的内容一个初始值
                    var strs="";
                    if (data){
                        for (var i = 0; i < data.length; i++) {
                            strs+='<div>'+data[i].name+'<div>'
                        }
                        //有数据则展示调用show()方法
                        $("#show").html(strs).show();
                    }
                });
                //把标记改为false，设置一个定时任务，表示1秒后才会从新根据文本框中的内容去从新发送请求
                flag=false;
                setTimeout(function () {
                    flag=true;
                },1000);
            }
        }else{
            //文本框没有改变的时候，用于展示的div为隐藏状态
            $("#show").hide();
        }
    })
</script>
</html>

英雄是怎样练成的

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市联动与搜索提示的简单代码实现

**①省市联动**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script></head><body>省份：&l
复制链接

扫一扫

专栏目录