使用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了
实在不想看 直接点击链接下载源码
本文结束，如果感觉对你有帮助不妨点一个赞，谢谢观看
