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 ...
随机推荐
- Android -- queryIntentActivities
某些时候你想要知道某个APP是否有注册了一个明确的intent,比如说你想要检查某个receiver是否存在,然后根据是否存在来这个receiver来在你的AP里面enable某些功能.我们可以通过P ...
- Kaggle 商品销量预测季军方案出炉，应对时间序列问题有何妙招
https://www.leiphone.com/news/201803/fPnpTdrkvUHf7uAj.html 雷锋网 AI 研习社消息,Kaggle 上 Corporación Favorit ...
- LDA（latent dirichlet allocation）的应用
http://www.52ml.net/1917.html 主题模型LDA(latent dirichlet allocation)的应用还是很广泛的,之前我自己在检索.图像分类.文本分类.用户评论的 ...
- Kafka：ZK+Kafka+Spark Streaming集群环境搭建（二十）ES6.2.2 Client API
scala版本2.11 java版本1.8 spark版本2.2.1 es版本6.2.2 hadoop版本2.9.0 elasticsearch节点列表: 192.168.0.120 192.168. ...
- 【nodejs】理想论坛帖子下载爬虫1.08
//====================================================== // 理想论坛帖子下载爬虫1.09 // 使用断点续传模式,因为网络传输会因各种原因中 ...
- Camtasia Studio CamStudio如何导出为手机视频
把视频拖放到左侧窗口,再按住拖放到下方的时间轴 点击生成并共享,然后设置为自定义生成设置 这里选择MP4,然后下一步 到这一步的时候,选择视频大小为自定义 会弹出窗口,手动输入宽360 ...
- python抓取数据，python使用socks代理抓取数据
在python中,正常的抓取数据直接使用urllib2 这个模块: import urllib2 url = 'http://fanyi.baidu.com/' stream = urllib2.ur ...
- iOS编程(双语版) - 视图 - 基本概念
1. 什么是视图? 视图显示为手机上的一块矩形区域,管理该区域的所有屏幕显示,它是UIView或者UIView的子类. 视图既可以从xib生成,也可以用代码生成. 2. 窗口 窗口是UIWindow或 ...
- js 时间加减
//js格式化时间 "yyyy-MM-dd hh:mm:ss" Date.prototype.Format = function (fmt) { var o = { "M ...
- LintCode: Single Number
C++ (1)异或操作 3^3=0 (2)for (auto &i : Obejuct) {} class Solution { public: /** * @param A: Array o ...