jquery,json,struts2整合开发(实现下拉列表)

最新推荐文章于 2018-10-22 14:27:40 发布

fupeng1114

最新推荐文章于 2018-10-22 14:27:40 发布

阅读量2.6k

点赞数

分类专栏： jsp开发文章标签： struts jquery json webwork javascript myeclipse

本文链接：https://blog.csdn.net/fupeng1114/article/details/7539866

版权

jsp开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jquery

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

json

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

struts 2

Struts2是Struts的下一代产品，是在 struts 和WebWork的技术基础上进行了合并的全新的Struts 2框架。其全新的Struts 2的体系结构与Struts 1的体系结构的差别巨大。Struts 2以WebWork为核心，采用拦截器的机制来处理用户的请求，这样的设计也使得业务逻辑控制器能够与Servlet API完全脱离开，所以Struts 2可以理解为WebWork的更新产品。虽然从Struts 1到Struts 2有着太大的变化，但是相对于WebWork，Struts 2只有很小的变化。

下面是整合的全过程：

首先是环境的配置：

在myeclipse9中，可以直接加入struts2的核心包：

里面包含了：

还要再到网上下载一个包：

这就整合了json与struts2了。Jquery只要包含jquery.js就可以。

具体代码如下：

Struts2中的action的方法如下：

public String queryAllInstitutes()
	{
		try 
	    {  
			//查询出所有学院的信息的集合
			ArrayList<Institute> Institutes = instituteService.queryAllInstitute();
			//定义迭代器，遍历集合
	    	Iterator<Institute> itr=Institutes.iterator();
	    	JSONArray jsonArray=new JSONArray();
	    	while(itr.hasNext())
	    	{
	    		 Institute ins=(Institute) itr.next();
	    		 //将每个学院的编号与名字加到json对象中
	    		 JSONObject temp = new JSONObject()  
	             .element( "instituteNo", ins.getInstituteNo())  
	             .element( "instituteName",ins.getInstituteName())  ;
	    		 //将json对象加到一个json数组中
	             jsonArray.add(temp);
	    	}
	    	HttpServletResponse response = ServletActionContext.getResponse(); 
	    	response.setContentType("text/html"); 
	        response.setCharacterEncoding("UTF-8");   
	        //将json数据转化成string输出到客户端
	        response.getWriter().print(jsonArray.toString());         
	     }
	     catch (Throwable e) 
	     {  
	    	 e.printStackTrace();  
	     }  
	     return null;
	}

struts.xml中的代码：

<action name="showAllInstitute" class="net.hncu.struts2.action.ShowAllInstituteAction" method="queryAllInstitutes">
			<!-- 定义处理结果与视图资源之间的关系-->
			
		</action>

showAllInsitute.js

$(document).ready(function () {  
    /* 获取学院名 */  
    $.post("showAllInstitute.action",function(data){  
    	alert(data);
        var jsonObj = eval("(" + data + ")");  
        for (var i = 0; i < jsonObj.length; i++) {  
            var $option = $("<option></option>");  
            $option.attr("value", jsonObj[i].instituteNo);  
            $option.text(jsonObj[i].instituteName);  
            $("#institute").append($option);  
        }  
    });  });

addMajor.jsp

<%@page contentType="text/html;charset=gb2312"%>

 <script language="JavaScript" src="js/jquery-1.6.3.js"></script>  
 <script type="text/javascript" src="js/showAllInstitute.js"></script>  

<html>
<head>
	<title>添加专业</title>
</head>
<body>


<center>
	<h2>添加专业</h2>
	<form action="addMajor" method="post">
	<table>
	  <tr>
		<td>专业编号:<input  type="text" name="majorNo"></td>
	  </tr>
	  <tr>
		<td>专业名称:<input type="text" name="majorName"></td>
      </tr>
	  <tr>
		<td>所属学院:<select id="institute" name="institute">  
      		 		<option value="">请选择</option>  
    			 </select>    	</td>
      </tr> 
	  <tr>
		<td><input type="submit" value="提交">
		      <input name="reset" type="reset" value="重置"></td>
		
	  </tr>
	</table>
	</form>
</center>
</body>
</html>

最后的结果如下：

fupeng1114

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery,json,struts2整合开发(实现下拉列表)

jquery Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。j
复制链接

扫一扫