SpringMVC, JQuery, JSON

http://viralpatel.net/blogs/2012/05/spring-3-mvc-autocomplete-json-tutorial.html


Java Spring MVC3 Annotations, Jquery & Json : AutoComplete Example
Java Spring MVC 3 Annotations, Jquery and Json AutoComplete : -


1 Create a Dynamic Web Project in Eclipse.2 Add the below jars to library. a) spring 3.0.3 release jars b) DB related jars c) JSON lib - json-lib-2.3-jdk15.jar 3) Download jquery related js files. 4) JSP file ================================================================= JSP ================================================================= <html>
<head>
<title>jQuery Hello World Alert box</title>
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript"
src="jquery/jquery-ui-1.8.6.custom.min.js"></script>
<link rel="stylesheet" type="text/css"
href="css/smoothness/jquery-ui-1.8.6.custom.css" />
</head><script>
$(function() {
function log(message) {
$("#log").append(message);
//$("__tag_12$7_").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
} $("#trades").autocomplete(
{
source : function(request, response) {
$.ajax( {
url : "sjauto.do",
datatype : "json",
data : {
name : request.term
},
success : function(data) {
response($.map(data, function(item) {
return {
label : item,
value : item
}
}));
}
});
},
minLength : 1,
select : function(event, ui) {
log(ui.item ? "" + ui.item.label + ", "
: "Nothing selected, input was " + this.value);
},
open : function() {
$(this).removeClass("ui-corner-all").addClass(
"ui-corner-top");
},
close : function() {
$(this).removeClass("ui-corner-top").addClass(
"ui-corner-all");
}
});
});
</script><body>
<div class="demo">
<div class="ui-widget"><label for="trades">Trades: </label> <input
id="trades" /></div>
<div class="ui-widget" style="margin-top: 2em; font-family: Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;"
class="ui-widget-content"></div>
</div>
</div>
<!-- End demo -->
</body>
</html>

<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into
the field. Here the suggestions are bird names, displayed when at least
two characters are entered into the field.</p>
<p>The datasource is a server-side script which returns JSON data,
specified via a simple URL for the source-option. In addition, the
minLength-option is set to 2 to avoid queries that would return too many
results and the select-event is used to display some feedback.</p>
</div>
<!-- End demo-description -->Web.xml
========================
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>SpringMVC3Tutorial</display-name>
<servlet>
<servlet-name>SpringMVC3</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC3</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>


==============================================================
Spring MVC 3 - Annotations Controller
=============================================================
package com.tgt.rts.controller;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.tgt.rts.domain.Trade;
import com.tgt.rts.service.FooService;
@Controller
public class GridController {
@Autowired
private FooService fooService;
@RequestMapping(value = "sjauto.do", method = { RequestMethod.GET,
RequestMethod.POST })
@ResponseBody
public List<String> getAutoComplete(HttpServletRequest request,
@RequestParam String name) {
List<String> sList = new ArrayList<String>();
List<Trade> list = getTrade(name);
for (Trade trade : list) {
sList.add(trade.getSide());
}
return sList;
}
private List<Trade> getTrade(String tradeId) {
try {
return this.fooService.doSomeBusinessStuff(tradeId);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
===================================================
springMVC3-servlet.xml
===================================================
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
<!-- import datasource and transaction manager -->
<import resource="applicationContext-infrastructure.xml" />
<context:component-scan base-package="com.tgt.rts" />
<context:annotation-config />
<mvc:annotation-driven />
<!-- enable transaction demarcation with annotations -->
<tx:annotation-driven />
<!--
define the SqlSessionFactory, notice that configLocation is not needed
when you use MapperScannerConfigurer
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
</bean> -->
<!-- scan for mappers and let them be autowired
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="conf.mapper" />
</bean> -->
<!-- define the MyBatis SqlSessionFactory -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:conf/mybatis-config.xml" />
</bean>

<bean id="fooService" class="com.tgt.rts.service.FooServiceDaoImpl">
<property name="tradeDao" ref="trDao" />
</bean>
<bean id="trDao" class="com.tgt.rts.dao.TradeDaoImpl">
<property name="sqlSessionFactory" ref="sqlSessionFactory" />
</bean>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<mvc:view-controller path="/" view-name="index" />
</beans>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringMVC框架中实现树,可以使用前端框架如jQuery、zTree等来实现树的展示,后台则需要提供树的数据,一般使用JSON格式来传输。以下是一些实现步骤: 1. 定义树节点数据结构:树节点数据结构应该包含节点id、节点名称、父节点id等信息。例如: ``` public class TreeNode { private Long id; private String name; private Long parentId; // ... } ``` 2. 查询树节点数据:使用Spring的JdbcTemplate或MyBatis等ORM框架查询树节点数据,并将结果转换成JSON格式。例如: ``` @GetMapping("/tree") @ResponseBody public List<TreeNode> getTree() { List<TreeNode> nodes = jdbcTemplate.query("SELECT * FROM tree", new BeanPropertyRowMapper<>(TreeNode.class)); return buildTree(nodes); } private List<TreeNode> buildTree(List<TreeNode> nodes) { Map<Long, TreeNode> map = new HashMap<>(); for (TreeNode node : nodes) { map.put(node.getId(), node); } List<TreeNode> tree = new ArrayList<>(); for (TreeNode node : nodes) { if (node.getParentId() == null) { tree.add(node); } else { TreeNode parent = map.get(node.getParentId()); if (parent != null) { parent.getChildren().add(node); } } } return tree; } ``` buildTree方法将查询出的节点列表构建成树形结构,并返回树的根节点列表。 3. 在前端展示树:使用jQuery或zTree等前端框架,在前端展示树形结构。例如: ``` <ul id="tree"></ul> <script> $(function() { $.getJSON("/tree", function(nodes) { $("#tree").zTree({ data: { simpleData: { enable: true, idKey: "id", pIdKey: "parentId", rootPId: null } }, view: { showLine: true, showIcon: false }, callback: { onClick: function(event, treeId, treeNode) { // 处理节点点击事件 } }, nodes: nodes }); }); }); </script> ``` 上述代码使用zTree来展示树形结构,使用getJSON方法从后台获取树节点数据,并在zTree的配置中指定树的数据格式、样式等。 需要根据具体的业务需求选择合适的前端框架和后台实现方式来实现树。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值