解决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 相关文章推荐
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php 团购折扣计算公式
2011/11/24 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
EsLint入门学习教程
2017/02/17 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python之PyMongo使用总结
2017/05/26 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
擅自离岗检讨书
2014/02/11 职场文书
企业安全生产责任书
2014/04/14 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
nginx常用配置conf的示例代码详解
2022/03/21 Servers