java jsp 页面下拉框 ajax异步加载数库数据

全面详细的新手下拉框数据显示。web项目中难免用到下拉框异步加载数据的情况。这里分享一个。使用的是jquery的ajax异步加载后台数据。后台使用java语言。

1，先看效果，下拉框如下：

2.获取值：

3.html页面代码：

/js/jquery-1.8.2.min.js 这个文件是需要引入的，为了用ajax。

$(function () {setDa();
});

function setDa(){var url="http://"+window.location.host+"/monitor-web/web/selectBox.do?server_type="+server_type;
    $.ajax({url: url,
        type:"post",
        dataType: "json",
        data : {"c_type" : "c",
            "t_type":"b"
        },
        success:function (data){var selectOption = "";
            selectOption += "<option></option>";
            $.each(data, function(n, value) {// alert(n+" --"+JSON.stringify(value));
                selectOption+="<option value="+value.s_value+">"+value.s_label+"</option>"
            });
            $('#selectbox').html(selectOption);
        }});

};
function getDa(){// alert($('#selectbox'));
    var d=document.getElementById("selectbox").value;
   alert(d);
};

<select id="selectbox" style="width: 200px">
</select>
<input type="button" value="取值"  style="width: 200px;height: 30px" οnclick="getDa()">

4.java后台：这里把值value和显示的标签label放入json中实现。至于数据库嘛，查出数据往obj里面放就好了

@RequestMapping("/selectBox")
public String selectBox(HttpServletRequest request, HttpServletResponse response) throws Exception {System.out.println("组装下拉框数据");
    JSONObject js1;
    JSONArray all=new JSONArray();
    for (int i=0;i<5;i++){js1=new JSONObject();
        js1.put("s_value","pro"+i);
        js1.put("s_label","显示"+i);
        all.put(js1);
    }response.setContentType("text/json;" + "charset=UTF-8");
    response.getWriter().write(all.toString());
    return null;
}

java jsp 页面下拉框 ajax异步加载数库数据相关推荐

淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
select下拉框的动态加载
layui里面的: 查询条件的下拉框: //加载查询条件的下拉框 $.get("/department/loadAllDepartment", function(data) {le ...
ajax 异步加载 list集合数据
2019独角兽企业重金招聘Python工程师标准>>> js端: $(function(){ $.ajax({ url : '<c:url value="/app/d ...
java动态生成下拉框，标注信息，HSSFDataValidation和数据有效性等设置
POI的基础使用 java动态生成下拉框属性,设置下拉框数据有效性 /*** 设置下拉框元素** @param firstRow 起始行* @param endRow 结束行* @param firs ...
PYTHON SELENIUM运用execute_script(JS)选择页面下拉框在输入框输入值
By Mejias 网上有很多教程使用SELENIUM去操作页面下拉框并选中,比如Select(web element).select_by_value(option).也有使用selenium对输入 ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
彭于晏百度图片Ajax异步加载爬取
Ajax 异步加载网页爬取分析网页在Networka条目里找xhr Ajax 加载 import requests from urllib.parse import urlencode impo ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...

java jsp 页面下拉框 ajax异步加载数库数据

java jsp 页面下拉框 ajax异步加载数库数据相关推荐

最新文章

热门文章