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 ...

随机推荐

命令行修改mysql密码和远程访问
http://jingyan.baidu.com/article/a3a3f8118cea488da2eb8a0a.html
jedis 连接 redis：Could not get a resource from the pool——我的出错原因和解决办法
windows 下安装的,本机使用现象:刚装好开发使用好好的, 重启电脑后就报这个错网上的所有可能都试过,没有用. 最后,放弃所有包装,用最原始的代码进行连接测试: Jedis jedis=new ...
SQL-根据多个条件更新数据
根据多个条件更新数据 UPDATE sphwph SET BKXSHL=t2.BKXSHL FROM sphwph t1,sphwph_170420 t2 --(SELECT a.* FROM dbo ...
如何屏蔽ctrl + v 粘贴事件，鼠标右键粘贴事件
通常在自己的APP里的密码框,验证码框需要屏蔽复制,粘贴,怎么办呢? 有三种方法: 1 hook 此方法是最完全的,但由于hook是全局的,容易影响到其它代码. 2 子类化文本框, 重写OnPaste ...
通读cheerio API
所谓工欲善其事,必先利其器,所以通读了cheerio的API,顺便翻译了一遍,有些地方因为知道的比较少,不知道什么意思,保留了英文,希望各位不吝告诉我,然后一起把这个翻译完成. ###cheerio ...
GPUImage简单滤镜使用（二）
GPUImage中,提供了许多简单的的常用的滤镜.在上一篇文章讲了如何调节图像的亮度这片文章讲一下如何通过GPUImage调节图像的对比度,饱和度,曝光度,和白平衡(美图秀秀中的色温). 原图像调整 ...
【nodejs】理想论坛帖子下载爬虫1.08
//====================================================== // 理想论坛帖子下载爬虫1.09 // 使用断点续传模式,因为网络传输会因各种原因中 ...
Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容环境测试数据项目结构演示参考资料本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
MySQL常用处理方法
1.replace into replace into t(id, update_time) values(1, now());或 replace into t(id, update_time) se ...
Mybatis源码分析之Cache二级缓存原理（五）
一:Cache类的介绍讲解缓存之前我们需要先了解一下Cache接口以及实现MyBatis定义了一个org.apache.ibatis.cache.Cache接口作为其Cache提供者的SPI(Ser ...

Cordova+jQuery Mobile+Spring REST

Cordova+jQuery Mobile+Spring REST的更多相关文章

随机推荐

热门专题