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.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsdhttp://www.springframework.org/schema/aophttp://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 --><beanclass="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和PhoneGap混合开发
其实二者并不影响,PhoneGap负责调用系统的接口,jQuery Mobile实现一些网页效果.PhoneGap开发请看上一篇文章,jQuery Mobile开发环境搭建如下:[请先阅读上一篇文章, ...
PhoneGap与Jquery Mobile结合开发android应用配置
由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...
小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...
《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）
笔者当年还是一枚小白的时候,经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引,点开之后却发现网页中弹出了一个对话框,必须要不断地点击烦人的按钮无数次才能关闭这个页面.当时也曾经在网上搜索过相应的 ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
文章目录 6. JQuery Mobile的布局 6.1 改良后的QQ登录界面 6.2 一种简洁的通讯录设计 6.3 完美实现九宫格 6.4 可以折叠的QQ好友列表 6.5 展开图标的设置 6.6 两 ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的高级特性
文章目录 7. JQuery Mobile的高级特性 7.1 JQuery Mobile的多页面模板 7.2 JQuery Mobile中的事件 7.3 JQuery Mobile中的触发事件 7.4 ...
深入jQuery Mobile
深入jQuery Mobile jQueryMobile上手非常容易,但是要做到近似于原生APP的效果则很不容易. 以下内容不断更新中,均为实际开发中的经验追信魔盒PhoneGap打包模式下的最佳模 ...
jQuery Mobile的学习时间bottonbutton的事件学习
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/27700521 程序猿都非常懒,你懂的! ...

Cordova+jQuery Mobile+Spring REST

Cordova+jQuery Mobile+Spring REST相关推荐

最新文章

热门文章