jquerymobilehtml5手机app表单跨域提交实例(手机app开发html5juqerymobliephonegap系列1).docVIP

jquery mobile + html5 手机app表单跨域提交实例（手机app开发html5 juqery moblie phonegap系列一） 第一次写博文，把学习过程记录下来也留个底，免得以后不用都忘了。 确定用html5 +jquery moblie+ phonegap 框架作为app开发的主框架。一开始在网上找了很多资料，跟着学习了一下，然后下了很多代码， 结果发现一个很大的问题，网上的代码很多都tmd有bug，不知道是不是故意的还是怎么地，让我也走了很多弯路。不多废话开始实战。 1、开发工具的准备： ? ? ?1.1 、 jquery mobile ?： 这个不用下载，直接在你的html文件head中间加上以下代码就行了, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? link rel=stylesheet href=/mobile/1.3.2/jquery.mobile-1.3.2.min.css script src=/jquery-1.8.3.min.js/script script src=/mobile/1.3.2/jquery.mobile-1.3.2.min.js/script ? ?? ?1.2 、html5 ?: 下载一个支持html5的浏览器就行了 ?，支持的最好的是 ?Google Chrome ， 这个还可以调试js，不错推荐。 ?1.3 、myEclipse 版本6.0以上就行，自带jdk 和tomcat ，这个写jsp当做服务器用。 1.4 ?、editplus ?这个是文本编辑器，写html代码用的。 这一节的开发工具就准备这些，我们这节只在浏览器上面看效果，下节讲打包发布到安卓手机上面还需要一些东西。 2、 ?开发流程： ? ? ? ? ? ? ? ?2.1 制作提交用户名和密码的 html5表单 。 ? ? ? ? ? ? ? 2.2 通过jsonp方式跨域提交到tomcat服务器上的jsp文件。 ? ? ? ? ? ? ?2.3 服务程序返回ok。 3、 开发步骤 ： ? ? ?3.1 ? ?html5文件 ，用editplus新建一个html文件 ，名字随便起。然后copy以下代码： ? ? ? ? ? ? ? ? ?? 3.2 ? 服务端接受程序开发： ? ? ? ?用myeclipse 新建一个web project 工程 ，工程名字叫maya ，工程名字和html5文件的提交url 中的”maya“ 对应。 ? ? ? ? ?在 工程WebRoot下面新建一个jsp文件 ，再copy如下代码 ： ? ? ? ? ?? ? ?3.3 ? ? ?发布工程到 myeclipse自带的tomcat服务器，启动tomcat ，服务端也搭建好了。 ? ? ? 3.4 ?用浏览器打开 3.1编写的html ，输入表单提交，服务器后台打印如下信息。 ? ? ? ? ?? ?浏览器接受服务器返回的成功信息如下。 ? ? 好的，看见ok 说明提交数据到服务器，然后服务器返回信息成功！ 4 、总结 ：? ? ? ? ?很简单的架构，如果你是从web开发的转做移动开发，恭喜了。这都不是问题，无缝链接转行到移动开发。 ?下节开始用phonegap打包html5程序，让这个页面作为一个app在手机上面跑起来。 ?完整的代码下载地址 ??/detail/lzy8395/7995367 ? ? ??