解决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 相关文章推荐
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现查看图片功能
Dec 01 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
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
详解python中的文件与目录操作
2017/07/11 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python实现月食效果实例代码
2019/06/18 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
外企测试工程师面试题
2015/02/01 面试题
厂办主管岗位职责范本
2014/02/28 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
音乐课外活动总结
2015/05/09 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
我的收音机情缘
2022/04/05 无线电
 python中的元类metaclass详情
2022/05/30 Python