使用AJAX做一个页面导航模糊匹配下拉框

绪论:使用AJAX页面导航模糊匹配下拉框

使用软件: Vs2019

实现方式：三层架构

功能实现是下面的图片

在这里插入图片描述

类似就是这样，下面把主样式界面代码放出来

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="jquery-3.6.0.js"></script>
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #body{
            width:500px;
            height:30px;
           margin:0 auto;
        }
        #txt{
            width:100%;
            height:30px;
        }
        ul {
            border:1PX solid RED;
        }
        li{
            list-style:none;
         }

        /*--------------------------------------------------------------*/
        .hi{
            display:none;      /*让ul隐藏*/
        }
        .show {
            display:block;      /*让ul显示*/
        }
    </style>

    <script>
        function load() {       
            var inp = $("#txt").val();              //获取文本框的值
            if (inp != "") {                        //判断文本框是否为空
                var lianxing = $("#txt").val();     //把获取到的值保存在一个变量
                $("ul").addClass("show");           //给ul标签添加一个显示的样式类
                $("ul").removeClass("hi");          //让给ul把上面的  隐藏样式类去掉
                var url = "Default2.aspx?name=" + lianxing;   //地址 把数据传去Default2.aspx界面
                $.post(url, function (data,status) {          //Ajax 准备   这里并不是大家主流使用的 $.ajax方法 不过效果一样的
                    if(status=="success"){           //判断返回状态码是否是success (成功)      
                        $("ul").empty();             //成功了就先把当前的ul清空
                        $("ul").append(data);        //把后台数据库的数据追加到ul 显示
                    }
                })    
            } else {                                 //如果没有文本框等于空
                $("ul").removeClass("show");         //让上面的显示的样式类给去掉
                $("ul").addClass("hi");              //因为上面是移除了这个类了 我们给重新添加回来
            }
        }
    </script>
</head>
<body>

    <div id="body">
        <div id="connect">
            <input  id="txt" type="text" onkeyup="load() " autocomplete="off"/>    <%--onkeyup事件  
                                                                                   autocomplete 让浏览器不显示以前输入过的记录--%>
            <ul class="hi">
               <%-- <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>--%>
            </ul>
        </div>
    </div>
</body>
</html>

上面代码介绍了前台代码的意思

现在来看一下我们的后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
using BLL;
public partial class Default2 : System.Web.UI.Page
{

    associationBLL ASB = new associationBLL();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            StringBuilder SB = new StringBuilder();    //创建一个容器要引入 using System.Text;
            string name = Request["name"].ToString();  //前台代码传送过来的值
            DataTable DT = ASB.lx(name);               //使用Datatable储存
            foreach (DataRow item in DT.Rows)          //foreach 循环
            {
                SB.Append("<li>"+item["connect"] +"</li>");    //数据库的值添加到容器 
            }
            Response.Write(SB);                                 //返回到前台
            前台界面  
        }
    }
}

以上就是前后台代码了，功能很容易看一下就Ok了

实在不想看直接点击链接下载源码

这个是源码点击下载

本文结束，如果感觉对你有帮助不妨点一个赞，谢谢观看

使用AJAX做一个页面导航模糊匹配下拉框

使用AJAX做一个页面导航模糊匹配下拉框

猜你喜欢