利用Ajax+js获取Json数组值并传入下拉框

最新推荐文章于 2022-03-31 23:59:51 发布

吃三明治的胖虎x

最新推荐文章于 2022-03-31 23:59:51 发布

阅读量1.7k

点赞数

分类专栏： Java web 文章标签： Ajax js json 下拉框联动

本文链接：https://blog.youkuaiyun.com/baidu_34211956/article/details/79795498

版权

Java web 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何通过Ajax技术实现网页中下拉框的动态加载功能。具体包括使用Servlet从数据库获取数据并转化为JSON格式，再利用JavaScript和Ajax在用户选择不同类型时动态填充价格下拉框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Servlet中获取数据库的数据保存到List集合中，在Servlet中（Pricels为List的一个对象）

 Gson gson = new Gson();
json = gson.toJson(Pricels);

response.getWriter().print(json);

在JSP页面中

<select name="roomtype" id="roomtype" οnchange="optionChange()">//一个下拉框中实现事件

<select name="roomprice" id="roomprice">//数据传入的下拉框

用POST方式传参数

function optionChange() {
			var xmlhttp;
			var roomtype_typeName = roomtype.value;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var returnJSONString = xmlhttp.responseText;
					var returnJSON = JSON.parse(returnJSONString);
					//加入下拉框中
					for (var i = 0; i < returnJSON.length; i++) {
						$("#roomprice").append(
								"<option value='"+returnJSON[i].price+"'>"
										+ returnJSON[i].price + "</option>")
					}
					
				}
			}
			xmlhttp.open("post", "/HotelManagement/AddRoomAjaxServlet", true);
			xmlhttp.setRequestHeader("Content-type",
					"application/x-www-form-urlencoded;charset=UTF-8");
			xmlhttp.send("roomtype_typeName=" + roomtype_typeName);
		}