jquery mobile+ html5 手机app表单跨域提交实例(手机app开发html5 juqery mobli

骨z1里的傲慢
653次浏览
2020年01月03日 23:09
最佳经验
本文由作者推荐
找公司开发一个app要多少钱
第一次写博文,把学习过程记录下来也留个底,免得以后不用都忘了。
确定用html5 +jquery moblie+ phonegap 框架作为app开发的主框架。一开始在网上找了很多资料,跟着学习了一下,然后下了很多代码,
结果发现一个很大的问题,网上的代码很多都tmd有bug,不知道是不是故意的还是怎么地,让我也走了很多弯路。不多废话开始实战。
1、开发工具的准备:
1.1 、 jquery mobile  : 这个不用下载,直接在你的html文件中间加上以下代码就行了,

 
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以下代码:

        Contact Example                                       

提交表单

                                           

版权所有 Copyright 2014

       
3.2   服务端接受程序开发:
用myeclipse 新建一个web project 工程 ,工程名字叫maya ,工程名字和html5文件的提交url 中的”maya“ 对应。


在 工程WebRoot下面新建一个jsp文件 ,再copy如下代码 :

<%@ page language="java" import=".*"  import="oder"  pageEncoding="UTF-8"%>      <%                String fullname=(ameter("fullname"),"utf-8");        String bday= ameter("bday");        String email = ameter("email");        //String uuid = ameter("uuid");        n(fullname);        n(bday);        //n(uuid);        String callback =ameter("callback");        // n(callback);                    n(callback+  "([ { name:\"OK\"} ] )");        %>

3.3      发布工程到 myeclipse自带的tomcat服务器,启动tomcat ,服务端也搭建好了。

3.4  用浏览器打开 3.1编写的html ,输入表单提交,服务器后台打印如下信息。

浏览器接受服务器返回的成功信息如下。

好的,看见ok 说明提交数据到服务器,然后服务器返回信息成功!
4 、总结 : 
很简单的架构,如果你是从web开发的转做移动开发,恭喜了。这都不是问题,无缝链接转行到移动开发。
下节开始用phonegap打包html5程序,让这个页面作为一个app在手机上面跑起来。
完整的代码下载地址   /detail/lzy8395/7995367