`
cjp1989
  • 浏览: 162616 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

有无json+jquery+Ajax+jsp实现异步传输数据方法。

阅读更多
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>&nbsp;&nbsp;&nbsp;&nbsp;'+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,
分享到:
评论

相关推荐

    JSON+Jquery+servlet+jsp+ajax例子

    在本例中,AJAX用于异步地向Servlet发送请求,获取JSON数据,然后使用jQuery解析和处理这些数据,无须用户感知页面的刷新。 具体流程可能如下: 1. 用户在JSP页面上触发一个操作,例如点击按钮。 2. 使用jQuery的`...

    ssh整合+JSON+Jquery+Ajax

    4. **数据持久化**:Hibernate负责将Java对象与数据库中的记录对应,实现数据的CRUD(创建、读取、更新、删除)操作。 5. **数据传输**:使用JSON格式在前后端之间传递数据,提高传输效率和解析速度。 6. **视图层...

    struts2+jquery+json+ajax例子

    jQuery库封装了Ajax API,使得开发者可以方便地创建Ajax请求,如`$.ajax()`或`$.post()`方法,这些方法可以用来向服务器发送登录数据,并接收服务器返回的JSON响应。 JSON(JavaScript Object Notation)是一种轻量...

    struts2+json+ajax+jquery

    总结来说,Struts2提供了后台处理和视图控制,JSON负责数据传输,Ajax实现了无刷新交互,而jQuery简化了这一过程。这种组合在Web开发中极其常见,是构建动态、高效Web应用的重要工具。理解并熟练掌握这四者之间的...

    Ajax + jQuery + json + js + jsp + servlet 三级联动

    在这个项目中,"Ajax + jQuery + json + js + jsp + servlet 三级联动"是一个完整的解决方案,它涵盖了从前端到后端的数据通信和处理。 首先,让我们深入理解每个技术的作用: 1. **Ajax**(Asynchronous ...

    Servlet+json+js(jquery)+jsp实现分页

    本项目使用Servlet、JSON、JavaScript(JQuery)和JSP技术实现了一个简单易懂、功能完善的分页解决方案。 **Servlet** 是Java服务器端编程的基础,它负责处理HTTP请求和响应。在分页应用中,Servlet主要负责接收...

    最简单的:Struts2+JSON+JQUERY+AJAX 完整DEMO源代码

    4. **JavaScript函数**:使用JQUERY的AJAX方法(如`$.ajax()`或`$.getJSON()`)来发起异步请求,获取JSON数据后更新页面。 5. **JSON数据**:在Action中生成的JSON对象,包含了游戏API所需的响应数据,如游戏状态、...

    struts2+jquery+json+ajax

    jQuery库中内置了Ajax功能,使得发起Ajax请求变得非常简单,可以轻松实现与服务器的通信,获取或发送JSON数据。 在给定的压缩包文件"myex"中,可能包含了一个示例项目或者教程,涵盖了如何使用Struts2、jQuery、...

    json+jsp+jQuery小例子

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用...总的来说,这个例子展示了如何结合JSON、JSP和jQuery实现一个现代Web应用的无刷新登录功能,利用AJAX实现前后端的异步通信,提高了用户体验。

    JSP+Jquery+JSON 集合实现AJAX

    在AJAX场景中,jQuery提供了一种简单的方式来发起异步请求,如`$.ajax()`或`$.getJSON()`函数,可以轻松地从服务器获取数据。 **AJAX** AJAX的核心在于XMLHttpRequest对象,它是浏览器提供的API,用于在后台与...

    struts+jquery+json+ajax.pdf

    综上所述,这个例子展示了如何使用 Struts2 处理后端逻辑,通过 JSON 将数据传递给前端,然后利用 jQuery 和 AJAX 实现无刷新的交互体验。这种组合在现代 web 开发中非常常见,能够有效提升应用的性能和用户体验。

    J2EE中JSON+Jquery_AJAX应用

    在AJAX应用中,jQuery的`.ajax()`方法简化了发送异步请求的过程,可以轻松地与服务器进行数据交互。此外,它还提供了一套完整的API来处理响应,例如通过`.done()`、`.fail()`和`.always()`处理成功、失败和完成回调...

    c3p0+dbUtils+Ajax+Json+Jquery实现【增删改查】Demo

    在本项目"C3P0+DBUtils+Ajax+Json+Jquery实现【增删改查】Demo"中,我们将探讨如何结合这些技术来构建一个功能完善的Web应用,用于执行基本的数据操作,即增(Add)、删(Delete)、改(Modify)和查(Query)。...

    strust2与json+jquery结合的注册用户验证

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端数据传输。jQuery则是一个高效、易用的JavaScript库,简化了DOM操作、事件处理和AJAX交互。将Struts2、JSON和jQuery结合,可以构建出...

    httpxmlRequest+ajax+jquery+fastjson+jsp异步通讯实战案例精讲

    6.利用JQuery的$.ajax,$.post,$.get方法,分别返回text,xml,json等格式数据,通过fastjson生成JSON格式数据; 7.使用JQuery的ajax技术,在一个页面实现新增、修改、删除、查询、分页,文件上传等功能;

    jQuery+json异步实现JSP和struts2之间的数据传递

    总结来说,"jQuery+json异步实现JSP和struts2之间的数据传递"是Web开发中的常见实践,它利用jQuery的Ajax功能与Struts2的JSON支持,实现了前后端的数据同步,简化了开发流程,提高了应用程序的响应速度和用户体验。...

    Struts2+Jquery+Ajax

    在Struts2框架下,我们可以使用Jquery的Ajax方法向服务器发送请求,获取JSON或XML数据,然后动态更新页面的部分内容。 在"06-mvc之struts2.ppt"中,可能涵盖了以下内容: 1. Struts2框架的基本概念和架构 2. 如何...

    ajax+servlet+jquery+jsp示例

    总结来说,"ajax+servlet+jquery+jsp示例"展示了如何使用现代Web开发技术进行前后端交互,实现数据的动态加载,提高用户体验。Ajax使得页面无刷新更新成为可能,jQuery简化了JavaScript代码,Servlet作为Java后端...

Global site tag (gtag.js) - Google Analytics