解决Jquery下拉框数据动态获取的问题


Posted in jQuery onJanuary 25, 2018

废话不多说,直接上源码:

select.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>" rel="external nofollow" >
 
 <title>My JSP 'select.jsp' starting page</title>
 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"> 
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
	-->
	<script type="text/javascript" src="js/jquery-2.1.1.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	
		function get_app_type() {
		
			$.ajax({
				type: "post",
				url: "AppTypeShow.action", //获取json数据
				dataType: "json",
				success: function(data) {
					var d = eval("(" + data + ")");
					for(var i = 0; i < d.length; i++) {
						var id = d[i].id;
						var name = d[i].name;
				var opt = "<option value='" + id + "'>" + name + "</option>";
						$("#appType").append(opt);
					}
				},
				error: function() {
					alert("系统异常,请稍后再试!")
				}
			});
			
		}
		
		function get_app_class() {
		
			$.ajax({
				type: "post",
				url: "AppClassShow.action",
				dataType: "json",
				success: function(data) {
					var d = eval("(" + data + ")");
					for(var i = 0; i < d.length; i++) {
						var id = d[i].id;
						var name = d[i].name;
				var opt = "<option value='" + id + "'>" + name + "</option>";
						$("#appClass").append(opt);
					}
				},
				error: function() {
					alert("系统异常,请稍后再试!")
				}
			});
			
		}
	
		$(document).ready(function() {
		
			get_app_type();
			get_app_class();
			
		});
	</script>
 </head>
 
 <body>
 <table>
 	<tr>
			<td align="right">APP类型:</td>
			<td align="left">
				<select name="appType" id="appType" 
	style="margin-left: 16px; height: 30px; width: 110px; text-align: left; size: 3; color: #505050;">
 					<option value="-1">---请选择---</option>
 				</select>
			</td>
		</tr>
		<tr height="25px"><td> </td></tr>
		<tr>
			<td align="right">APP种类:</td>
				<td align="left">
					<select name="appClass" id="appClass" 
		style="margin-left: 16px; height: 30px; width: 110px; text-align: left; size: 3; color: #505050;">
 						<option value="-1">---请选择---</option>
 					</select>
			</td>
		</tr>
 </table>
 </body>
</html>

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<constant name="struts.i18n.encoding" value="UTF-8"></constant>
	<package name="simpleton" extends="struts-default,json-default">
	
		<action name="*JsonAction" method="{1}"
				class="jquery.chisj.action.JsonAction">
			<result name="fail">error.jsp</result>
			<result type="json">
				<param name="root">result</param>
			</result>
		
		</action>
		
		<action name="AppTypeShow"
				class="jquery.chisj.action.NtAppAction"
				method="appTypeShow">
			<result name="fail">error.jsp</result>
			<result type="json">
				<param name="root">result</param>
			</result>
		</action>
		
		<action name="AppClassShow"
				class="jquery.chisj.action.NtAppAction"
				method="appClassShow">
			<result name="fail">error.jsp</result>
			<result type="json">
				<param name="root">result</param>
			</result>		
		</action>
		
	</package>
</struts>

NtAppAction.java

/**
 * 
 */
package jquery.chisj.action;
import java.util.ArrayList;
import java.util.List;
import jquery.chisj.entity.APPClass;
import jquery.chisj.entity.APPType;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.JSONArray;
/**
 * @ClassName: NtAppAction
 * @Description: TODO
 * @Author: chisj chisj@foxmail.com
 * @Date 2016年1月20日 下午4:53:50
 *
 */
public class NtAppAction extends ActionSupport {
	private String result;
	
	public String appTypeShow() {
		System.out.println("---app type show---");
		List<APPType> appTypeList = new ArrayList<APPType>();
		try {
			APPType appType_1 = new APPType();
			APPType appType_2 = new APPType();
			appType_1.setId(Short.valueOf("1"));
			appType_1.setName("Android");
			appType_2.setId(Short.valueOf("2"));
			appType_2.setName("iOS");
			appTypeList.add(appType_1);
			appTypeList.add(appType_2);
			JSONArray jsonArray = JSONArray.fromObject(appTypeList);
			result = String.valueOf(jsonArray);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return SUCCESS;
	}
	
	public String appClassShow() {
		System.out.println("---app class show---");
		List<APPClass> appClassList = new ArrayList<APPClass>();
		try {
			APPClass appClass_1 = new APPClass();
			APPClass appClass_2 = new APPClass();
			appClass_1.setId(Short.valueOf("1"));
			appClass_1.setName("种类1");
			appClass_2.setId(Short.valueOf("2"));
			appClass_2.setName("种类2");
			appClassList.add(appClass_1);
			appClassList.add(appClass_2);
			JSONArray jsonArray = JSONArray.fromObject(appClassList);
			result = String.valueOf(jsonArray);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return SUCCESS;
	}
	
	public String getResult() {
		return result;
	}
	
	public void setResult(String result) {
		this.result = result;
	}
	
}

以上这篇解决Jquery下拉框数据动态获取的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 #jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
javascript整除实现代码
2010/11/23 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Python实现队列的方法
2015/05/26 Python
python检查指定文件是否存在的方法
2015/07/06 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
赡养老人协议书
2014/04/21 职场文书
依法行政工作汇报
2014/10/28 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
奖励通知
2015/04/22 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
无线电知识基础入门篇
2022/02/18 无线电
Linux中各个目录的作用与内容
2022/06/28 Servers