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="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>  
    

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

                  

<!DOCTYPE html>
<html>   
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Contact Example</title>    
 <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>
<script type="text/javascript" charset="utf-8">         
 
      
      <script type="text/javascript"  charset="utf-8">
jQuery(function($) 
{  
// 使用 jQuery 异步跨域提交表单 
$('#newForm').submit(function() 
{ 

$.ajax({  
                type : "get",  
                async : false,  
                url : "http://192.168.16.194:8080/maya/test.jsp?"+encodeURI($('#newForm').serialize())+"&callback=?",   
                dataType : "jsonp",  
                jsonp : "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  
                jsonpCallback : "uuuuu", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  
                success : function(data) {  
                    alert('查询的信息: ' + data[0].name);  
                },  
                error : function() {  
                    alert('fail');  
                }  
            });  
}); 
}); 
		</script> 
    </head>   
    <body>     
     <!--<h1>Example</h1>    
     <p>Find Contacts</p>  
 
     <p><a href="#" οnclick="baozi(); return false;">Vibrate</a></p>  
     <p><a href="#" οnclick="intent(); return false;">Htmlandroid</a></p>   -->
     
     <div data-role="page" id="pageone">
  <div data-role="header">
    <h1>提交表单</h1>
  </div>

  <div data-role="content">
    <form   id="newForm" name="newForm" method="post">
  <div data-role="fieldcontain">
    <label for="fullname">全名:</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">生日:</label>
    <input type="date" name="bday" id="bday">

    <label for="email">电邮:</label>
    <input type="email" name="email" id="email" placeholder="您的邮件地址..">
  </div>
 <input type="submit" data-inline="true" value="提交">
</form>
  </div>

  <div data-role="footer">
    <h1>版权所有 Copyright 2014 </h1>
  </div>
</div> 
   </body>
   </html>

3.2   服务端接受程序开发:

       用myeclipse 新建一个web project 工程 ,工程名字叫maya ,工程名字和html5文件的提交url 中的”maya“ 对应。



 


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

          

<%@ page language="java" import="java.util.*"  import="java.net.URLDecoder"  pageEncoding="UTF-8"%>
       <% 
        
       String fullname=URLDecoder.decode(request.getParameter("fullname"),"utf-8");
        String bday= request.getParameter("bday");
        String email = request.getParameter("email");
        //String uuid = request.getParameter("uuid");
        System.out.println(fullname);
        System.out.println(bday);
        //System.out.println(uuid);
        String callback =request.getParameter("callback");
        // System.out.println(callback);
        
            out.println(callback+  "([ { name:\"OK\"} ] )");
        %>

 

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


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

          


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


 


  好的,看见ok 说明提交数据到服务器,然后服务器返回信息成功!


4 、总结 : 

       很简单的架构,如果你是从web开发的转做移动开发,恭喜了。这都不是问题,无缝链接转行到移动开发。

 下节开始用phonegap打包html5程序,让这个页面作为一个app在手机上面跑起来。


 完整的代码下载地址   http://download.csdn.net/detail/lzy8395/7995367

      

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值