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 ...
随机推荐
- RxJava【创建】操作符 create just from defer timer interval MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 机器学习、NLP、Python和Math最好的150余个教程（建议收藏）
编辑 | MingMing 尽管机器学习的历史可以追溯到1959年,但目前,这个领域正以前所未有的速度发展.最近,我一直在网上寻找关于机器学习和NLP各方面的好资源,为了帮助到和我有相同需求的人,我整 ...
- 命令行修改mysql密码和远程访问
http://jingyan.baidu.com/article/a3a3f8118cea488da2eb8a0a.html
- mysql 字符串按照数字类型排序
一个varchar,char的字段 存放 1+,12- ,11等字符串将字段*1或者+0可以将MySQL字符串字段按数值排序 order by 字段名称+0 desc/asc的形式进行排序 order ...
- Ubuntu SVN安装&使用&命令
SVN 安装 apt-get install subversion checkout svn checkout svn://192.168.1.110/app 按提示输入相应的用户名和密码. 往版本库 ...
- 条件随机场 (CRF) 分词序列谈之一(转)
http://langiner.blog.51cto.com/1989264/379166 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.ht ...
- 浅谈Kmeans聚类
http://www.cnblogs.com/easymind223/archive/2012/10/30/2747178.html 聚类分析是一种静态数据分析方法,常被用于机器学习,模式识别,数据挖 ...
- android中抽屉布局DrawerLayout的使用
这个抽屉布局类似于手机QQ的主界面,点击左上角头像,会从界面左侧弹出一个抽屉,展示一些内容. 首先是布局界面activity_main.xml: <?xml version="1.0& ...
- LintCode: Happy Number
C++ class Solution { public: /** * @param n an integer * @return true if this is a happy number or f ...
- 微信小程序 - 非入侵式布局
非入侵式布局,就是不影响原有内容以及代码,增加用户体验感(UE)的一种方式. 例如我们每个接口必须返回: 0:请求成功 -1:请求失败 .... 这样就便于前端判断数据是否加载成功,然后以客观的方式提 ...