Cordova+jQuery Mobile+Spring REST
Cordova可以方便地建立跨平台的移动应用，使用jQuery Mobile做手机界面，后台使用rest提供数据交互。
首先，使用jQuery Mobile建立一个页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body> <script> $.support.cors =true;
$.mobile.allowCrossDomainPages=true; function onSuccess(data, status)
{
data = $.trim(data);
$("#info").text(data);
} function onError(data, status)
{
// handle an error
} $(document).ready(function() {
$("#submit").click(function(){ var formData = $("#callAjaxForm").serialize(); $.ajax({
type: "POST",
url: "http://192.168.1.218:8080/SpringMVC/rest/add",
cache: false,
data: formData,
dataType : 'text',
success: onSuccess,
error: onError
}); return false;
});
}); </script> <div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button" data-icon="home">首页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" data-role="button" data-icon="search">搜索</a>
</div> <div data-role="content">
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="name">name</label>
<input type="text" name="name" id="name" value="" /> <label for="age">age</label>
<input type="text" name="age" id="age" value="" />
<h3 id="info"></h3>
<button data-theme="b" id="submit" type="submit">Submit</button>
</div>
</form>
</div> <div data-role="footer" data-position="fixed" >
<div data-role="navbar" >
<ul>
<li><a href="#" data-icon="custom">功能1</a></li>
<li><a href="#" data-icon="custom">功能2</a></li>
<li><a href="#" data-icon="custom">功能3</a></li>
<li><a href="#" data-icon="custom">功能4</a></li>
</ul>
</div>
</div>
</div> </body>
</html>
后台使用Spring REST：
package com.garfield.web.springmvc; import java.io.IOException; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView; import com.garfield.pojo.User; @Controller
@RequestMapping("/rest")
public class HelloWorldControllerAnnotation { @RequestMapping(value = "/helloworld")
public ModelAndView helloWorld() {
ModelAndView mv = new ModelAndView();
mv.addObject("message", "Hello Garfield !");
mv.setViewName("hello");
return mv;
} @RequestMapping(value="/get/{id}",method=RequestMethod.GET)
public String get(@PathVariable String id,HttpServletRequest request ,HttpServletResponse response) throws IOException{
//request.setAttribute("message", "Hello,This is a example of Spring3 RESTful!<br/>ID:"+id+"");
//return "index.jsp"; User user=new User();
user.setName("garfield");
user.setAge("18"); JSONObject jsonObject = JSONObject.fromObject(user); response.getWriter().write(jsonObject.toString());
return null;
} @RequestMapping(value="/show",method=RequestMethod.GET)
public String show(HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("show users ....");
return null;
} @RequestMapping(value="/edit/{id}",method=RequestMethod.PUT)
public String edit(@PathVariable String id,HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("edit user:"+id);
return null;
} @RequestMapping(value="/remove/{id}",method=RequestMethod.DELETE)
public String remove(@PathVariable String id,HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("delete user:"+id);
return null;
} @RequestMapping(value="/add",method=RequestMethod.POST)
public String add(HttpServletRequest request ,HttpServletResponse response) throws IOException{
User user = new User();
user.setName(request.getParameter("name"));
user.setAge(request.getParameter("age")); JSONObject jsonObject = JSONObject.fromObject(user); response.getWriter().write(jsonObject.toString()); return null;
} //多参数传递
@RequestMapping(value="/test/{id}/{sql}",method=RequestMethod.GET)
public String test(@PathVariable String id,@PathVariable String sql,HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("test,id:"+id+",sql:"+sql);
return null;
} }
然后就可以和后台进行数据交互了。
注意：
$.support.cors =true;
$.mobile.allowCrossDomainPages=true; 是为了跨域调用。 运行界面示意：
附: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"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
springmvc-servlet.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<!--看到下面的beans这个元素标签没有，必须有标签的声明-->
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
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/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"> <!-- 扫描定义的bean -->
<context:component-scan base-package="com.garfield.web.springmvc" /> <!-- 处理器 -->
<bean name="/hello" class="com.garfield.web.springmvc.HelloWorldController"/> <!-- 下面的配置用于非注解 -->
<!-- HandlerMapping -->
<bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"/>
<!-- HandlerAdapter -->
<bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/> <!-- 注解配置 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/> <!-- ViewResolver -->
<bean
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> </beans>
Cordova+jQuery Mobile+Spring REST的更多相关文章
- JQuery Mobile + Cordova 实战一
好的,今天给大家继续讲解 JQM 和 Cordova 的结合吧.Cordova 和 Phonegap 反正是一个东西,大家就当做一个是旧版(Phonegap)的一个是新版(Cordova)的就行.不同 ...
- JQuery Mobile+cordova构建一个Android项目
1.安装Android开发环境 Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...
- jQuery Mobile学习日记之HelloWorld
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...
- PhoneGap与Jquery Mobile组合开发android应用的配置
PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...
- 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- PhoneGap与Jquery Mobile结合开发android应用配置
由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...
- jQuery Mobile和PhoneGap混合开发
其实二者并不影响,PhoneGap负责调用系统的接口,jQuery Mobile实现一些网页效果.PhoneGap开发请看上一篇文章,jQuery Mobile开发环境搭建如下:[请先阅读上一篇文章, ...
- PhoneGap+jQuery Mobile+Rest 访问远程数据
最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...
- JQuery Mobile 实战一
今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http ...
随机推荐
- Dubbo框架应用之（三）--Zookeeper注冊中心、管理控制台的安装及解说
我是在linux下使用dubbo-2.3.3以上版本号的zookeeper注冊中心客户端. Zookeeper是Apache Hadoop的子项目,强度相对较好,建议生产环境使用该注冊中心. Dubb ...
- 关于Promise的一些个人理解jQuery的deferred
一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组), ...
- 【算法】插入排序（Insertion Sort）
(PS:内容参考MIT算法导论) 插入排序(Insertion Sort): 适用于数目较少的元素排序 伪代码(Pseudocode): 例子(Example): 符号(notation): 时间复杂 ...
- php学习实例3
新闻发布管理系统 路由器action.php <!DOCTYPE html> <html> <head> <title> </title> ...
- Android学习之Android studio TraceView和lint工具的使用具体解释
上次讲述了一下Android studio Terminal的使用配置,今天又学习了一下关于Traceview和lint工具的使用. 首先来讲lint吧: Android lint工具是Android ...
- Selenium2(WebDriver)总结(二)---Firefox的firebug插件参数设置(补充)
本文是对上一节的补充:http://www.cnblogs.com/puresoul/p/4251536.html 使用Selenium2(webdriver)启动firefox且自动加载firebu ...
- ANT task之Junit、JunitReport
一.ANT任务之Junit: 学习ANT其实主要是学习ANT的task,ANT众多task中有一个Testing Tasks,它下面有两个任务:Junit和JunitReport,主要用来进行单元测试 ...
- 微信小程序 - 使用字体图标（阿里云库）
实现 阿里图库:https://www.iconfont.cn/ CSS3:[attribute*=value] 选择器 步骤 1. 加入购物车 2. 下载代码解压,复制iconfont.css ap ...
- Qt通过ODBC连接SQL Server2008实践总结
Qt连接数据库的方式很多,这里说明一种最常用也是最实用的方式,因为这种方式在Windows上开发程序使用起来非常方便,并且也是远程连接数据库所需要用到的方式. 前提工作: 在Win7下安装了SQL S ...
- AndroidStudio 中查看获取MD5和SHA1值以及如何查看手机应用信息以及读取*.db数据库里面数据
查看获取MD5和SHA1值具体操作方式链接 查看获取MD5和SHA1值实际操作命令CMD语句: C:\Users\Administrator>cd .android C:\Users\Admin ...