`
iloveflower
  • 浏览: 79763 次
社区版块
存档分类
最新评论
  • iloveflower: 呵呵。好好学习。。。。。。。。。。。。
    java 读书
  • Eric.Yan: 看了一点,不过是电子版的……你这一说到提醒我了,还要继续学习哈 ...
    java 读书

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>
分享到:
评论

相关推荐

    SpringMVC:整合JQUERY与JSON

    当SpringMVC与jQuery结合,并通过JSON(JavaScript Object Notation)进行数据交换时,可以实现前后端的高效协作,提供更流畅的用户体验。 1. **SpringMVC框架基础**: - **DispatcherServlet**:SpringMVC的核心...

    Springmvc+maven+ajax+jquery+json+mybatis登录增删改查详细注释

    Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用MyEclipse 10运行出来.并且付有sql脚本.可直接导入运行.并且经本人...

    springmvc + jquery + ajax + json 异步传递数据

    SpringMVC、jQuery、Ajax和JSON这四个技术的结合,为开发者提供了一种高效且灵活的方式来实现这一功能。接下来,我们将深入探讨这些技术以及它们如何协同工作。 SpringMVC是Spring框架的一部分,是一个强大的MVC...

    SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码以及校验并且赋有详细注释,以及增删改查功能

    注:此项目是用IntelliJ IDEA 13.1.3此软件编写而成,不过和myeclipse都差不多,本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码,拦截器,如果用户没有登录则不能进行相应操作...

    springMVC json格式转换demo

    在前端,通常使用JavaScript的`fetch` API或jQuery的`ajax`方法发送JSON请求。以下是一个简单的JavaScript示例: ```javascript let user = { name: '张三', age: 30 }; fetch('/saveUser', { method: 'POST', ...

    SpringMVC利用Ajax,JQuery交互Json

    本教程将深入讲解如何在SpringMVC中利用Ajax和JQuery来交互Json数据。 首先,让我们理解什么是Json。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成...

    ajax+springmvc+json

    在IT行业中,Ajax(Asynchronous JavaScript and XML)技术、SpringMVC框架以及JSON(JavaScript Object Notation)数据格式是Web开发中的重要组成部分。这个小demo的标题“ajax+springmvc+json”表明它是一个用于...

    springmvc-json输出时需要导入的2个jar文件

    采用springmvc输出json时,需要加载这里的两个jar,采用@ResponseBody,可以将pojo类对象自动输出为json变量,也可以将一个List类>list输出为一个json数组,或json格式的任意输出,配合jquery easyuui的datagrid输出...

    ajax向springmvc传递json

    1. JSON 数据格式:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Ajax与Spring MVC的交互中,JSON作为数据传输的载体,用于封装请求参数和响应...

    springmvc_json_自动加载表格实例

    在本项目"springmvc_json_自动加载表格实例"中,我们关注的是如何使用Spring MVC框架与Kendo UI库结合,实现在Web应用中动态加载JSON数据到表格中的功能。Spring MVC是Spring框架的一部分,主要用于构建后端MVC架构...

    基于SpringMVC接受JSON参数详解及常见错误总结

    在使用jQuery进行Ajax请求时,可以通过data属性发送JSON对象,而 dataType属性设为'json'表示预期返回的数据类型是JSON。 3. **SpringMVC参数绑定**:在SpringMVC中,可以使用多种方式接受JSON参数。一种常见的方法...

    Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册

    Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接...

    springmvc3+json参数传递后台接收json参数

    "springmvc3+json参数传递后台接收json参数"这个主题涉及到的是如何使用Spring MVC 3版本接收前端通过JSON格式发送的数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因其易于人阅读和编写,...

    【springmvc+jquery.form.min.js+spring文件上传】

    在本项目"【springmvc+jquery.form.min.js+spring文件上传】"中,我们将探讨如何结合这两个技术实现异步文件上传。 首先,我们需要理解Spring MVC中的文件上传处理。Spring MVC提供了`@RequestParam("file") ...

    Springmvc+maven+ajax+jquery+json+mybatis

    Springmvc+maven+ajax+jquery+json+mybatis做的异步登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用IntelliJ IDEA 13.1.3运行出来.并且付有sql脚本.可直接导入运行...

    用Velocity改装的jquery+json+springMVC+ibatis简单例子

    在这个“用Velocity改装的jquery+json+springMVC+ibatis简单例子”中,我们探讨的是一个集成多种技术的Web应用程序开发示例。这个项目利用了Velocity作为模板引擎,jQuery作为前端JavaScript库,JSON作为数据交换...

    SpringMVC JSON数据交互实现过程解析

    本文将深入探讨如何在SpringMVC中实现JSON数据的交互,包括其优势、依赖包、以及具体的实现步骤。 首先,我们来了解为什么选择JSON进行数据交互。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,...

    springmvc+json

    在`index.jsp`中,你可以使用JavaScript(如jQuery)来发送异步请求获取JSON数据,然后动态更新页面内容: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt; ...

    springMVC+ajax+json

    JavaScript库如jQuery提供了方便的API来简化Ajax调用,包括发送XMLHttpRequest请求、处理响应数据和更新DOM元素。 **JSON** JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,...

    基于springMVC3.2的REST源码,结合了jquery和json

    综上所述,这个项目提供了一个实用的示例,展示了如何在SpringMVC 3.2中构建RESTful服务,以及如何使用jQuery进行客户端的JSON交互。通过这个压缩包中的代码,开发者可以学习到如何配置SpringMVC以支持REST,编写...

Global site tag (gtag.js) - Google Analytics