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>
