`

html+jquery通过传递json访问后台控制层

jsonBlogHTML 
阅读更多

1、由于spring3已经对ajax支持的很好了，前端就可以使用html+jquery,后台使用spring，两者之间用json交换数据就可以了。放弃原来使用的jsp+struts了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$.fn.serializeObject = function() {
			var o = {};
			var a = this.serializeArray();
			$.each(a, function() {
				if (o[this.name]) {
					if (!o[this.name].push) {
						o[this.name] = [ o[this.name] ];
					}
					o[this.name].push(this.value || '');
				} else {
					o[this.name] = this.value || '';
				}
			});
			return o;
		};

		$("#sub").click(function() {
			var userAccountForm = $("#userAccountForm");
			//将form数据组装成json对象的juery扩展
			var userAccount = userAccountForm.serializeObject();
			//将json对象转成String是用的json2（http://www.json.org/js.html）的JSON.stringify
			var jsonuserAccount = JSON.stringify(userAccount);
			$.ajax({
				type : 'POST',
				contentType : 'application/json',
				url : 'http://192.168.8.65/userAccountAjax/getUserAccount',
				data : jsonuserAccount,
				dataType : 'json',
				success : function(data) {
					alert(data);
					$("div#responsename").text(data.usacLoginName);
					$("div#responsepasswd").text(data.usacLoginPasswd);
				}
			});
		});
		
		$("#pwd").click(function() {
			$.ajax({
				type : 'GET',
				contentType : 'html',
				url : 'http://192.168.8.65/userAccountAjax/getUserPwd?usacLoginName='+$("#usacLoginName").val(),
				dataType : 'json',
				success : function(data) {
					$("div#responsepasswd").text(data);
				}
			});
		});
	});
</script>
</head>
<body>
<form action="" id="userAccountForm" name="userAccountForm">
用户名：<input type="text" id="usacLoginName" name="usacLoginName" value="xctong" /><br/>
密码：<input type="text" id="usacLoginPasswd" name="usacLoginPasswd" value=""/>
<input type="button" id="sub" name="sub" value="保存对象" />
<input type="button" id="pwd" name="pwd" value="查看密码" />
<div id="responsename"></div>
<div id="responsepasswd"></div>
</form>
</body>
</html>
  
package com.yt.manager.user.controller;

import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yt.manager.user.model.UserAccount;
import com.yt.manager.user.repository.UserAccountRepository;

/**
 * 控制器
 * @author zxf
 * 
 */
@Controller
@RequestMapping("/userAccountAjax")
public class UserAccountAjaxController {

	@Resource
	UserAccountRepository userAccountRepository;

	/**
	 * 1、注意处理申请的函数的参数直接就是Customer对象（Customer是一个具有属性name和addr的vo），
	 * 而不是json字串，这里的关键是这样的。
	 * 2、spring具有将数据转化后再交给controller的功能，spring 3
	 * 新增了对json的处理能力，是基于Jackson JSON Processor（http://jackson.codehaus.org/）的。
	 * 3、这样一来，spring在接收contentType为application/json的request时会自动将json字串间转换成期望
	 * 的java对象，同样，发送response时，contentType被设为application/json，并且将java对象转为 json
	 * 字串。
	 * 4、上面已经说到，spring自动将response进行json化，所以处理函数直接返回vo对象就可以了。
	 * 而在页面端，由于我们指定了dataType为json，所以jquery直接把接收到的json字串转成了javascript
	 * 对象，我们可以直接使用data.name的写法取得数据了。
	 * @param userAccount
	 * @return
	 */
	@RequestMapping(value = "/getUserAccount", method = RequestMethod.POST)
	@ResponseBody
	public UserAccount getUserAccount(@RequestBody UserAccount userAccount) {
		System.out.println("用户名："+userAccount.getUsacLoginName());
		System.out.println("密码："+userAccount.getUsacLoginPasswd());
		return userAccount;
	}

	@RequestMapping(value = "/getUserPwd", method = RequestMethod.GET)
	@ResponseBody
	public String getUserPwd(String usacLoginName) {
		UserAccount ua = userAccountRepository.getUserAccountByLoginName(usacLoginName);
		return ua.getUsacLoginPasswd();
	}
}
  
<!--处理来自JSON格式的请求,spring在接收contentType为application/json的request时会自动将json字串间转换成期望
		的java对象，同样，发送response时，contentType被设为application/json，并且将java对象转为 json
		字串-->
	<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<util:list id="beanList">
				<ref bean="mappingJacksonHttpMessageConverter"/>
			</util:list>
		</property>
	</bean>
	<bean id="mappingJacksonHttpMessageConverter"
		class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" >
	</bean>
 

 

http://hi.baidu.com/danghj/blog/item/71d9fecd606ee95d0eb34572.html

分享到：
| Java枚举
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    简单的SSH+JQuery+JSON例子

    5. 控制层通过Struts返回JSON响应给前端。 6. 前端的JQuery代码接收到JSON数据，解析后更新页面内容。 这样一个例子展示了如何利用SSH处理后台业务逻辑，使用JQuery进行前端交互，并通过JSON进行数据交换，形成一个...

    项目组管理系统，Java+json+jQuery+ajax

    总结起来，这个【项目组管理系统】结合了Java的稳定性和强大的功能，利用JSON进行数据交换，借助jQuery简化前端开发，并通过Ajax提供流畅的用户体验。对于想要学习Web应用开发的人来说，这是一个很好的实践案例，...

    stuts2+ibatis+jQuery +UI + flexgrid+Json做的一个用户管理界面

    在用户管理界面中，Json 用于在后台服务和前端之间传递数据，如AJAX请求返回的结果通常以Json格式返回，前端再解析Json并渲染到页面上。 综上所述，这个用户管理界面利用Struts2进行请求处理和业务逻辑控制，iBatis...

    ssh整合+JSON+Jquery+Ajax

    Ajax的核心是通过XMLHttpRequest对象来实现后台与服务器的异步通信。然而，实际应用中，我们更多地使用JSON而非XML，因为JSON格式的数据更简洁且易于处理。 在这个项目中，可能的应用场景包括： 1. **用户界面交互...

    struts2+jquery+json+ajax的使用

    首先，Struts2是一个基于MVC（Model-View-Controller）架构模式的Java Web框架，它简化了开发过程，提供了强大的控制层。通过配置Action类，Struts2可以处理HTTP请求，并根据配置的结果将请求分发到相应的业务逻辑...

    Css+Ajax+JavaScript+jQuery+VBScript帮助文档

    3. 对象模型：通过ActiveX控件访问系统资源，如文件系统、网络等。 4. ASP应用：在服务器端运行，生成动态HTML，提供交互性网页。 5. 与JavaScript共存：在早期的IE环境中，VBScript和JavaScript可以在同一页面中...

    ssm+tiles框架，前后台传值与获取值（json）

    在"ssm+tiles框架，前后台传值与获取值（json）"的场景中，我们将讨论如何在这些框架下进行数据的传递，特别是利用JSON格式进行数据交换。 首先，我们需要确保所有必要的jar包已经包含在项目中。这包括Spring的核心...

    dtree+jquery动态树的生成(二)

    结合dtree和jQuery，我们可以实现后台动态生成树结构的数据，然后通过Ajax请求传递到前端展示。 具体步骤如下： 1. **数据库设计**：在Oracle数据库中，我们需要创建一个或多个表来存储树结构的数据，如id、父id、...

    ssh+dtree+juqery+json+mysql数据库 两个实例

    当用户交互时，jQuery发送Ajax请求至后台，Struts控制器处理请求，更新数据库，并返回JSON数据更新树形视图。 2. **资源管理系统**：在这个实例中，可能是一个文件服务器或权限控制应用。SSH处理文件的上传、下载、...

    联动(struts2+json+jquey)

    首先，Struts2是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它简化了开发过程，提供了强大的控制层功能。在Struts2中，Action类是业务逻辑的主要载体，而Struts2的标签库则提供了丰富的视图渲染...

    struts2 jquery json ajax 三级联动菜单

    Struts2、jQuery、JSON和Ajax是Web开发中的关键技术，它们在构建动态、交互式的用户界面方面发挥着重要作用。在“三级联动菜单”的场景中，这些技术被巧妙地结合在一起，实现了多级选择的联动效果。 首先，Struts2...

    struts2，jquery，json，ajax

    Struts2的核心是Action，它是控制器层的主要组成部分，负责接收HTTP请求，处理业务逻辑，并通过Result返回相应的视图。 jQuery是一个轻量级的JavaScript库，极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。...

    web在线聊天工具 附html+css+js 源文件

    3. **JSON** - 数据交换格式，用于在客户端和服务器之间传递消息内容。 4. **模板引擎** - 如Mustache或Handlebars，可以更方便地将数据渲染到HTML。 5. **存储技术** - 可能会用到浏览器的localStorage或...

    基于JQuery的datagrid分页数据实现

    服务器端将查询结果转换为JSON格式，然后通过Ajax响应传递给前端，前端解析JSON数据并填充到datagrid中。 9. **用户体验优化**：为了提升用户体验，可能还需要考虑数据加载的进度提示、错误处理机制以及无数据时的...

    spring3mvc-jQuery-easyUI做的ajax版本用户管理系统

    4. **Model**：实体类，如`User`，封装了用户数据，用于在服务层和DAO层之间传递信息。 5. **AJAX请求**：使用jQuery的`.ajax()`方法发送异步请求，获取或更新用户信息，避免了整个页面的刷新。 6. **easyUI组件**...

    jquery实现级联操作

    可以使用`&lt;c:forEach&gt;`标签遍历后台传递的集合，生成JSON字符串。 4. **Java后端**： 使用Java编写控制器或Servlet，接收AJAX请求，根据请求参数查询数据库。这通常涉及DAO（Data Access Object）层，用于与数据库...

    MVC中三层文件的曹总执行流程

    然后，业务逻辑层返回数据到控制层，控制层将数据封装成Map对象，并通过JSON格式回传给前端。例如，创建一个HashMap并将学生信息、年龄、姓名、电话和地址分别放入对应的键值对中，最后使用ObjectMapper将Map转换为...

    Jquery Asp.net AJAX 异步通讯

    在ASP.NET中，aspx.cs文件是页面的后台代码逻辑层，包含C#或VB.NET代码。通过jQuery的$.ajax()函数，我们可以发起异步请求到aspx.cs中的方法。首先，你需要在aspx.cs中定义一个接受GET或POST请求的方法，然后在...

    Jquerytree

    具体代码实现可能包括Servlet或Spring MVC的控制器处理前端请求，JDBC模板或DAO层来执行SQL，以及前端的jQuery Tree配置和事件监听。 总之，这个项目展示了如何结合JDBC和jQuery Tree来创建一个功能完备的树状图...

Magicbox
Global site tag (gtag.js) - Google Analytics