解决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 相关文章推荐
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
phpmyadmin操作流程
2006/10/09 PHP
一个显示天气预报的程序
2006/10/09 PHP
PR值查询 | PageRank 查询
2006/12/20 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
python3爬取各类天气信息
2018/02/24 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python读取xml文件方法解析
2020/08/04 Python
Python pymsql模块的使用
2020/09/07 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
2014年巴西世界杯口号
2014/06/05 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
防卫过当辩护词
2015/05/21 职场文书