1.Select选项值的改变引发onchange()事件,前台jsp页面写法
function getName(){
var subcompanyId=document.getElementById("selectsubcompany").value;
//alert(subcompanyId);
$.ajax({
url:"queryCompany.action",
//data可以传参多个参数"name=John&location=Boston",
data: "subcompanyId="+subcompanyId,
success:function(data){
document.getElementById("subcompanydesc").innerHTML='<p>'+data+'</p>';
},
error:function(){
alert("error occerd");
}
});
alert(msg+"111");
}
2.转到action,使用的是属性值String subcompanyId;get,set方法
//*属性的写法
private String subcompanyId;
private String msg;
//*方法
public String queryCompany(){
System.out.println(subcompanyId);
id=Long.valueOf(subcompanyId);
Company company=this.searchService.getCompany(id);
msg = company.getDescription();
return SUCCESS;
}
3.struts.xml的result书写
<action name="queryCompany" class="mainAction" method="queryCompany">
<result name="success">/WEB-INF/pages/common/common.jsp</result>
<result name="false">/error.jsp</result>
</action>
commom.jsp的内容很简单就是一个
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
${msg}
4.ajax的方法里success直接将common.jsp的值取过来,很方便的实现异步加载而且不需要json,这个可以实现多级联动,多级触发,理论上很强大...
5.加上json提交的方式还是很好的,新增json方法
json相比xml更加方便,不过要遵守json的语法格式
{"属性":'值'}
,其中可以存放数组,数组的格式是
[{"id":3,"name":"张三"},{"id":4,"name":"李四"}]
,通过Ajax获取,再json传给jsp页面使用js接收,要转换为对象:
var json=eval('('+msg+')')
;附上我更改的上面方法,实现不同参数,不同内容的联动。难点在于:action里的json的拼接:
6.修改的acton类
StringBuffer str=new StringBuffer("{'companydesc':'"+company.getDescription()+"','regioninfo':[");
regionList=this.searchService.getRegionList(companyId);
//拼接成json的数据类型支持{"key":value,"...":[{}]}
for(int i=0;i<regionList.size();i++){
region=(Region)regionList.get(i);
if(i==regionList.size()-1){
str.append("{'id':'"+region.getId()+"','name':'"+region.getRegionname()+"'}");
}else{
str.append("{'id':'"+region.getId()+"','name':'"+region.getRegionname()+"'},");
}
}
str.append("]}");
msg=str.toString();
7.js的写法
$.ajax({
url:"queryCompany.action",
data: "subcompanyId="+subcompanyId,//传参
success:function(msg){
var json=eval('('+msg+')');
//alert(json.companydesc);
//for(var i=0;i<json.regioninfo.length;i++){
//alert(json.regioninfo[i].id+"///"+json.regioninfo[i].name);
//}
document.getElementById("subcompanydesc").innerHTML='<p> '+json.companydesc+'</p>';
for(var i=0;i<json.regioninfo.length;i++){
regioninfo.add(new Option(json.regioninfo[i].name,json.regioninfo[i].id));
}
},
error:function(){
}
});
8.中间依然是common.jsp存放数据,实现了完美的多级联动,多个对象使用json,很方便,实际上还是需要大家去摸索...
采用add(new Option()),必需清空option否则引起一直在添加option,可以在document.getElementById("id").options.length=1;或者=0,
分享到:
相关推荐
在本例中,AJAX用于异步地向Servlet发送请求,获取JSON数据,然后使用jQuery解析和处理这些数据,无须用户感知页面的刷新。 具体流程可能如下: 1. 用户在JSP页面上触发一个操作,例如点击按钮。 2. 使用jQuery的`...
4. **数据持久化**:Hibernate负责将Java对象与数据库中的记录对应,实现数据的CRUD(创建、读取、更新、删除)操作。 5. **数据传输**:使用JSON格式在前后端之间传递数据,提高传输效率和解析速度。 6. **视图层...
jQuery库封装了Ajax API,使得开发者可以方便地创建Ajax请求,如`$.ajax()`或`$.post()`方法,这些方法可以用来向服务器发送登录数据,并接收服务器返回的JSON响应。 JSON(JavaScript Object Notation)是一种轻量...
总结来说,Struts2提供了后台处理和视图控制,JSON负责数据传输,Ajax实现了无刷新交互,而jQuery简化了这一过程。这种组合在Web开发中极其常见,是构建动态、高效Web应用的重要工具。理解并熟练掌握这四者之间的...
在这个项目中,"Ajax + jQuery + json + js + jsp + servlet 三级联动"是一个完整的解决方案,它涵盖了从前端到后端的数据通信和处理。 首先,让我们深入理解每个技术的作用: 1. **Ajax**(Asynchronous ...
本项目使用Servlet、JSON、JavaScript(JQuery)和JSP技术实现了一个简单易懂、功能完善的分页解决方案。 **Servlet** 是Java服务器端编程的基础,它负责处理HTTP请求和响应。在分页应用中,Servlet主要负责接收...
4. **JavaScript函数**:使用JQUERY的AJAX方法(如`$.ajax()`或`$.getJSON()`)来发起异步请求,获取JSON数据后更新页面。 5. **JSON数据**:在Action中生成的JSON对象,包含了游戏API所需的响应数据,如游戏状态、...
jQuery库中内置了Ajax功能,使得发起Ajax请求变得非常简单,可以轻松实现与服务器的通信,获取或发送JSON数据。 在给定的压缩包文件"myex"中,可能包含了一个示例项目或者教程,涵盖了如何使用Struts2、jQuery、...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用...总的来说,这个例子展示了如何结合JSON、JSP和jQuery实现一个现代Web应用的无刷新登录功能,利用AJAX实现前后端的异步通信,提高了用户体验。
在AJAX场景中,jQuery提供了一种简单的方式来发起异步请求,如`$.ajax()`或`$.getJSON()`函数,可以轻松地从服务器获取数据。 **AJAX** AJAX的核心在于XMLHttpRequest对象,它是浏览器提供的API,用于在后台与...
综上所述,这个例子展示了如何使用 Struts2 处理后端逻辑,通过 JSON 将数据传递给前端,然后利用 jQuery 和 AJAX 实现无刷新的交互体验。这种组合在现代 web 开发中非常常见,能够有效提升应用的性能和用户体验。
在AJAX应用中,jQuery的`.ajax()`方法简化了发送异步请求的过程,可以轻松地与服务器进行数据交互。此外,它还提供了一套完整的API来处理响应,例如通过`.done()`、`.fail()`和`.always()`处理成功、失败和完成回调...
在本项目"C3P0+DBUtils+Ajax+Json+Jquery实现【增删改查】Demo"中,我们将探讨如何结合这些技术来构建一个功能完善的Web应用,用于执行基本的数据操作,即增(Add)、删(Delete)、改(Modify)和查(Query)。...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端数据传输。jQuery则是一个高效、易用的JavaScript库,简化了DOM操作、事件处理和AJAX交互。将Struts2、JSON和jQuery结合,可以构建出...
6.利用JQuery的$.ajax,$.post,$.get方法,分别返回text,xml,json等格式数据,通过fastjson生成JSON格式数据; 7.使用JQuery的ajax技术,在一个页面实现新增、修改、删除、查询、分页,文件上传等功能;
总结来说,"jQuery+json异步实现JSP和struts2之间的数据传递"是Web开发中的常见实践,它利用jQuery的Ajax功能与Struts2的JSON支持,实现了前后端的数据同步,简化了开发流程,提高了应用程序的响应速度和用户体验。...
在Struts2框架下,我们可以使用Jquery的Ajax方法向服务器发送请求,获取JSON或XML数据,然后动态更新页面的部分内容。 在"06-mvc之struts2.ppt"中,可能涵盖了以下内容: 1. Struts2框架的基本概念和架构 2. 如何...
总结来说,"ajax+servlet+jquery+jsp示例"展示了如何使用现代Web开发技术进行前后端交互,实现数据的动态加载,提高用户体验。Ajax使得页面无刷新更新成为可能,jQuery简化了JavaScript代码,Servlet作为Java后端...