asp+access返回json数据+layui select下拉菜单联动展示实例

前端：x-admin框架

后端：asp+access数据库(vbscript)

首先这个实例是用vb写的，是asp不是asp.net

aspx与asp是不同的，asp是一个运行环境，默认的脚本语言是vb，

aspx是asp.net的一种文件类型可用c#也可用vb

其次 asp中并没有能直接返回json格式的函数或者类，需要引入一个json.asp，完整实例代码在文末

数据库：databases.mdb

college (院系表)

major(专业表)

前端展示页代码(select.asp)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!--#include file="json.asp"-->
<%
'打开数据库连接
dim conn,connstr,db,rs
db="databases.mdb"
Set conn = Server.CreateObject("ADODB.Connection")connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&db&"")conn.Open connstr
%><html class="x-admin-sm"><head><meta charset="GB2312"><title>后台系统</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /><link rel="stylesheet" href="./css/font.css"><link rel="stylesheet" href="./css/xadmin.css"><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script><script type="text/javascript" src="./js/xadmin.js"></script></head><body><div class="layui-fluid"><div class="layui-row"><form class="layui-form"><div class="layui-form-item"><label for="college" class="layui-form-label"><span class="x-red">*</span>院系</label><div class="layui-input-inline"><select id="college" name="college" class="valid" lay-filter="college"><% set rs=server.CreateObject("adodb.recordset")rs.open "select * from college",conn,1,1do while not rs.eof%><option value="<%=rs("id")%>"><%=rs("college")%></option><% rs.movenextloop%>  </select></div></div><div class="layui-form-item"><label for="major" class="layui-form-label"><span class="x-red">*</span>专业</label><div class="layui-input-inline"><select id="major" name="major" class="valid"></select></div></div></form></div></div><script>layui.use(['form', 'jquery','layer'],function() {$ = layui.jquery;var form = layui.form,layer = layui.layer;form.on('select(college)',function(data){var val=data.value;console.log(val)$.ajax({url: "test.asp",//请求地址type: "Get",//请求方式dataType: "JSON",//返回数据类型data: {val: val},//发送的参数success:function(data){console.log(data.data);var resdata=data.datavar proHtml = '';for(var o in resdata){proHtml += '<option value="' + resdata[o].id +  '">' + resdata[o].major + '</option>';}$('#major').html(proHtml);form.render();  },})})});</script></body></html>

效果

后端代码(test.asp)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!--#include file="json.asp"-->
<%
'打开数据库连接
dim conn,connstr,db,rs
db="databases.mdb"
Set conn = Server.CreateObject("ADODB.Connection")connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&db&"")conn.Open connstr
%>
<%
dim json : set json = jsObject()
dim list : set list = jsArray()
dim val,itemval=Request("val")Response.ContentType = "text/json"
set rs=conn.execute("select * from major where college_id = "&val)set json("data") = list
Do while not (rs.eof or rs.bof)set list(null) = jsObject()for each item in rs.fieldslist(null)(item.Name) = item.Valuenextrs.movenext
Loop
Response.Write(json.jsString)
%>

效果

需要注意如果是需要返回一维json格式，后端可以直接这样写，不必用循环

json("data")="xxx"

完整代码

https://gitee.com/gdhsxuan/asp-json-select

里面有个演示网站用的iis.exe

直接打开就可以，不用再搭iis的环境

asp+access返回json数据+layui select下拉菜单联动展示实例相关推荐

layui select下拉菜单联动
做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示 <div class="layui-inline"><label class=&qu ...
layui select下拉框联动
背景:涉及到省市县获取的项目必有下拉框三级联动,每次都需要百度查询,或者去翻原来的项目,着实不方便.因此,为了自己对三级联动的印象加深,同时也帮助第一次接触下拉框三级联动的小伙伴快速上道,总结一下该 ...
layui select(下拉框)修改事件监听
layui select(下拉框)修改事件监听示例(节选): 当下拉框选项修改后,自动执行my_function函数. HTML部分: <select id="camera_strea ...
CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单
iframe嵌套单页面 iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 <style>/* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */if ...
html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
谷歌浏览器无法选select_去除谷歌浏览器表单边框特效和select下拉菜单背景
01 02 textarea {resize:none;} 然后就是这个谷歌会自动加背景的问题: 这是谷歌浏览器内核特有.用:-webkit-appearance:none 解决. 附:sele ...
html下拉select美化,美化select下拉菜单
默认的select下拉菜单不容易美化,很多UI是无法通过css更改的,所以要美化先更改结构,下面介绍的美化插件尽管代码各异,但大部分都将默认的下拉菜单转化成样式可控的元素,例如div.ul.span等 ...
html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...

asp+access返回json数据+layui select下拉菜单联动展示实例

asp+access返回json数据+layui select下拉菜单联动展示实例相关推荐

最新文章

热门文章