`
hngmduyi
  • 浏览: 335174 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

json实现页面局部刷新

阅读更多
第一步,导入需要的JAR包
//struts2-json-plugin-2.1.8.jar
//json-lib-2.1.jar
//jquery-1[1].3.2.min.js

/*
 *实体类
 */
public class Goods implements java.io.Serializable {

	private Integer id;
	private String goodName;
	private Integer goodType;
}
//DAO
public class GoodDao {
	public List<Goods> loadFirst(){
		Configuration conf=new Configuration().configure();
		SessionFactory sf=conf.buildSessionFactory();
		Session session=sf.openSession();	
		List<Goods> goodsList=session.createCriteria(Goods.class).add(Restrictions.eq("goodType", 0)).list();
		session.close();
		return goodsList;
	}
	public List<Goods>loadSecond(Integer id){
		Configuration conf=new Configuration().configure();
		SessionFactory sf=conf.buildSessionFactory();
		Session session=sf.openSession();	
		
		List<Goods>goodsList=session.createCriteria(Goods.class).add(Restrictions.eq("goodType", id)).list();
		session.close();
		return goodsList;
	}
}
//ACTION
public class GoodAction extends ActionSupport {
	private GoodDao goodDao=new GoodDao();
	private List<Goods>firstList=new ArrayList();
	private List<Goods>secondList=new ArrayList();
	private Goods good;
	private Integer id;//一级分类ID
        
	// 加载一级分类
    public String loadBlock(){
    	firstList=goodDao.loadFirst();
    	return "loadFirst";
    }
       
        //根据所选一级分类来加载二级分类  
    public String searchSecond(){
    	secondList=goodDao.loadSecond(id);
    	return "success";
    }
}

//STRUTS.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    "http://struts.apache.org/dtds/struts-2.1.7.dtd">
  <struts>
       <package name="default" extends="json-default">//继承json-default
             <action name="goodAction" class="action.GoodAction">
                   <result name="loadFirst">/goods.jsp</result>
                   <result type="json" ></result>//定义成json类型的
             </action>
       </package>
  </struts>
//在struts2-json-plugin-2.1.8.jar的JsonPlugin.tld中定义了如下包(已经定义过了):
<struts>
    <package name="json-default" extends="struts-default">
        <result-types>
            <result-type name="json" class="org.apache.struts2.json.JSONResult"/>
        </result-types>
        <interceptors>
            <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/>
        </interceptors>
    </package>
</struts>

//页面
<s:form action="" theme="simple">
            <s:label value="一级分类:"/>
            <s:select list="firstList" listKey="id" listValue="goodName"  headerKey="-1" headerValue="请选择" id="firstBlock" cssClass="select"></s:select> <br/>
            <s:label value="二级分类:" />
            <s:select list="secondList" listKey="id" listValue="goodName" headerKey="-1" id="secondBlock" headerValue="请选择" cssClass="select"></s:select>  
       </s:form>
//JS
<script type="text/javascript" language="javascript">
     $(function(){
		   $("#firstBlock").change(function(){ 
				  $.ajax({
							url:"goodAction!searchSecond",
							type:"post",
							dataType:"json",
							data:{"id":$("#firstBlock").val()},
							error:function (XMLHttpRequest, textStatus, errorThrown) {
							alert(XMLHttpRequest.responseText);
							},
							success:showContent
				  }); 		 
		   });	
     });
 function showContent(data){
    document.getElementById('secondBlock').options.length=1;
    for(var i=0;i<data.secondList.length;i++){
       document.getElementById('secondBlock').options.add(new Option(data.secondList[i].goodName,data.secondList[i].id));
       alert(data.secondList[i].id);
    } 
  }	      

上面实现的逻辑是,当第一次加载页面时把一级分类读取出来,此时二级分类为空。当用户点某个一级分类时根据此一级分类ID读取出数据库中该分类下的二级分类………………当然用的是局部刷新。呵呵
分享到:
评论

相关推荐

    Struts2+jQuery(不用JSON)实现局部刷新

    3. **局部刷新实现**: 局部刷新是AJAX的核心特性,它允许只更新页面的一部分而不是整个页面。在Struts2中,我们可以创建一个Action,该Action负责处理特定的请求并返回需要更新的数据。然后,使用jQuery的AJAX方法...

    jquery实现页面局部刷新

    **jQuery 实现页面局部刷新详解** 在Web开发中,页面刷新是常见的操作,但全局刷新会导致整个页面重新加载,这可能会浪费用户的时间和流量。为了提高用户体验,我们常常需要实现页面局部刷新,即只更新页面中特定...

    ajax与php利用json传输数据,实现局部刷新

    标题"ajax与php利用json传输数据,实现局部刷新"涉及的主要知识点包括: 1. **Ajax工作原理**:Ajax通过JavaScript创建XMLHttpRequest对象,打开一个与服务器的连接,发送请求,监听状态变化,当服务器响应时,处理...

    ajax操作json数组,实现局部刷新

    在本文中,我们将深入探讨如何使用Ajax操作JSON数组来实现页面的局部刷新。Ajax,即Asynchronous JavaScript and XML,是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页...

    使用Ajax实现页面无刷新(局部刷新),

    它的核心是JavaScript对象XMLHttpRequest,通过这个对象,我们可以向服务器发送异步请求,获取数据并动态更新页面内容,从而实现页面的无刷新或局部刷新。 **一、Ajax的基本工作原理** Ajax的核心是创建...

    页面四种局部刷新技术.txt

    它能够实现页面局部刷新的效果,当主页面其他部分不变时,仅刷新或更新iframe内部的内容。 例如,在给定的部分内容中,通过设置`iframe`的`src`属性为动态URL(如`myframe.aspx?city=`+ city),可以实现根据用户...

    springboot页面局部刷新后台管理系统

    总的来说,"springboot页面局部刷新后台管理系统"是利用SpringBoot、Shiro、前端插件和现代Web技术构建的,实现了权限管理、页面局部刷新和高效的API交互,提高了系统的响应速度和用户体验。同时,这种设计模式也...

    servlet局部刷新及json字符串

    1.纯servlet+jquery局部刷新; 2.fresh 后台包含 json内容,需要json相关jar包,自行下载,不需要的可以删除; 3.有页面点击事件,初学者可以研究下...4.QQ569317668 不喜勿喷 servlet局部刷新及json字符串 相互学习!

    java实现ajax局部刷新

    前端JavaScript收到响应后,通过DOM操作将新数据插入到页面的适当位置,实现局部刷新的效果。 在学习这个基础示例时,初学者需要注意以下几点: - **JavaScript基础**:理解JavaScript的基本语法和DOM操作是使用...

    ajax实现局部刷新

    在网页开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现页面的局部刷新,以提高用户体验。Ajax的核心是JavaScript对象XMLHttpRequest,它允许在不重新加载整个页面的情况下与服务器交换数据并...

    使用ajax和servlet实现网页局部刷新

    在网页开发中,为了提供更好的用户体验,我们常常需要实现页面的局部刷新,而Ajax(Asynchronous JavaScript and XML)和Servlet的结合使用正是实现这一功能的关键技术。本篇将详细讲解如何利用Ajax与Servlet来实现...

    php ajax 实现局部刷新简单例子(超简单化)

    在探讨PHP与AJAX如何协同工作以实现网页的局部刷新之前,我们首先需要理解这两个技术的基本概念及其在现代Web开发中的角色。 ### PHP:服务端脚本语言 PHP(Hypertext Preprocessor)是一种广泛使用的开源服务器端...

    springmvc tiles 局部刷新

    5. **更新DOM**:客户端接收到服务器返回的局部视图内容后,使用JavaScript更新页面的对应DOM元素,实现局部刷新的效果。 6. **错误处理**:同时,还需要考虑错误处理情况,比如在网络中断或服务器端异常时,应向...

    jquary局部刷新全面刷新

    在Web开发中,局部刷新和全面刷新是两种常见的页面更新方式,它们各自有不同的应用场景。 局部刷新(Partial Page Refresh)主要用于只更新网页的一部分区域,而不是整个页面。这提高了用户体验,因为用户不需要...

    dwr ajax 局部刷新

    "dwr ajax 局部刷新"指的是使用DWR框架来更新网页的特定部分,而不是重新加载整个页面,提高用户体验。 **DWR基本概念:** 1. **CMT (Controlled Method Table)**:DWR的核心组件,负责管理服务器端的Java方法和...

    运用ajax局部刷新 制作登录验证

    通过以上步骤,我们可以利用Ajax实现登录验证的局部刷新功能,为用户提供更加平滑、高效的交互体验。在实际项目中,还可以结合其他技术,如Vue.js、React等前端框架,进一步优化代码结构和性能。

    jquery实现的局部刷新聊天室

    【jQuery实现的局部刷新聊天室】是一个利用JavaScript库jQuery构建的实时通信系统,它通过Ajax技术实现了页面的无刷新更新,提供了丰富的用户体验。聊天室功能包括发送消息、接收消息、显示在线用户列表以及表情功能...

    Ajax技术局部刷新注册页面

    本文将深入探讨Ajax技术在局部刷新注册页面中的应用以及其背后的原理。 首先,理解Ajax的基本工作流程至关重要。当用户在注册页面上填写信息并触发一个Ajax请求时,JavaScript代码会创建一个XMLHttpRequest对象,这...

    html通过js调用php代码实现局部刷新

    本文将深入探讨如何在HTML页面中通过JavaScript调用PHP代码,以实现局部刷新功能,从而提高用户体验。我们将主要关注以下几个方面: 1. **HTML基础**:HTML(超文本标记语言)是网页的基础结构,用于定义网页内容和...

    四种局部刷新技术

    在网页开发中,局部刷新是一种优化用户体验的重要技术,它允许页面的部分内容在不重新加载整个页面的情况下更新。这里我们将深入探讨四种常见的局部刷新技术:iframe、JavaScript、callback以及Ajax。 首先,**...

Global site tag (gtag.js) - Google Analytics