jquery ajax 前后端通信传值（select 级联

雨点打透心脏的1/2处 2022-10-01 02:50 172阅读 0赞

好久没有写前端的东西了，原来的东西都忘了。从网上查了查资料，功能还是做出来了，总结一下吧。没准以后又忘了。

目标：两个select级联,第二个option根据数据库里的值添加

html（写个大概的意思，不一定能直接用)

<select id="type">
    	<option value="1">音频</option>
    	<option value="2">视频</option>
    	<option value="3">图片</option>
    </select>
    <select id="sets"></select>

js（写个大概的意思，不一定能直接用）

<script language="JavaScript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    	$(function(){
    		 getSets();
    		 $("#type").change(function() {
    			 getSets();
    		 }); 
    	})
    			
    	function getSets(){
    		$("#sets").empty();/清空上次的数据
    		$.ajax({ 
    			url: "XXXXAction_getSetsByType.aspx",
    			//说是解决的中文值乱码的，我试了一下失败了，不传中文的value了，本来我觉得值是中文也不好。小项目不是很规范 ：）
    			contentType:"application/x-www-form-urlencoded; charset=UTF-8",
    			datatype:"json",
    			data:{type:$("#type").find("option:selected").val()},
    			success: function(data){
    				var dataObj=eval("("+data+")");//解析json
    				if(dataObj.flag){for(var i=0;i<dataObj.list.length;i++){
    					$("#sets").append("<option value="+dataObj.list[i].value+">"+dataObj.list[i].name+"</option>"); 
    				}}        
    			}}
    		);
    	}
    </script>

java（写个大概的意思，不一定能直接用）

public void getSetsByType(){
    	Map<String,Object> map = new HashMap<String, Object>();
    	try {	
    		map.put("flag",true);
    		map.put("msg", "查找类型成功");
    		map.put("list",xxxxService.getSetsByType(type));
    	} catch (Exception e) {
    		map.put("flag", false);
    		map.put("msg", "查找类型失败");
    		e.printStackTrace();
    	}
    	JSONObject jsonObject = new JSONObject(map);
    	response.getOutputStream().write(jsonObject.toString().getBytes());
    }

参考：

解决乱码问题：[http://www.jb51.net/article/31791.htm][http_www.jb51.net_article_31791.htm]

[http_www.jb51.net_article_31791.htm]: http://www.jb51.net/article/31791.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关级联初始化-ajax

最近写页面，需要做业务线和业务的级联组件，并在页面打开就做好初始化。原来用的方案是每个初始化的方法返回一个Boolean类型的值，在方法调用处，用while循环判

冷不防/ 2023年08月17日 15:57/ 0 赞/ 129 阅读

相关 Ajax 请求方法 select 级联

一、创建Ajax let req = new XMLHttpRequest(); 二、发送请求 req.open('POST','asses/te

淩亂°似流年/ 2023年05月30日 06:08/ 0 赞/ 11 阅读

相关 jquery ajax 前后端通信传值（select 级联

好久没有写前端的东西了，原来的东西都忘了。从网上查了查资料，功能还是做出来了，总结一下吧。没准以后又忘了。目标：两个select级联,第二个option根据数据库

雨点打透心脏的1/2处/ 2022年10月01日 02:50/ 0 赞/ 173 阅读

相关前后端传值注意事项

1、前后端开发时，要注意给用户显示对应的提示，和限制，包括但不限于账号格式、邮箱格式、密码格式、传递数据长度，数量等等，同时要给用户足够的提示。 2、开发时，测试要考虑有效

今天药忘吃喽~/ 2022年09月05日 05:30/ 0 赞/ 245 阅读

相关 jquery ajax flask 前后端通讯

如题，以自己的博客为例，抓取博客信息，一个api后台服务提供数据，前端服务接收数据并展示目录结构： test |----app |----\_\_in

灰太狼/ 2022年06月13日 14:38/ 0 赞/ 222 阅读

相关 jquery级联

js： $(document).ready(function()\{ //找到三个下拉框 var carnameSelect = $(".car

客官°小女子只卖身不卖艺/ 2022年06月09日 02:55/ 0 赞/ 327 阅读

相关 springMvc前后端传值

[SpringMVC注解@RequestParam全面解析][SpringMVC_RequestParam] 博客分类： [Spring][] [html

谁借莪１个温暖的怀抱￠/ 2022年06月09日 02:27/ 0 赞/ 602 阅读

相关 django 前后端传值

[Django 前后台的数据传递][Django] 严正声明：作者：[psklf][] 出处： [https://www.cnblogs.com/psklf/a

以你之姓@/ 2022年05月13日 21:18/ 0 赞/ 284 阅读

相关 Ajax实现级联

级联代码： //一级下拉框 var categoryLevel1 = $("categoryLevel1"); //拿到一级下拉框元素

秒速五厘米/ 2022年03月26日 02:40/ 0 赞/ 305 阅读

相关 ajax：前后端json传值写法

ajax中的contentType有多种类型，默认是contentType=application/x-www-form-urlencoded;charset=utf-8;，如

女爷i/ 2021年09月15日 07:08/ 0 赞/ 420 阅读