jquery mobile + html5 手机app表单跨域提交实例（手机app开发html5 juqery moblie phonegap系列一）

最新推荐文章于 2023-11-20 08:12:16 发布

动静

最新推荐文章于 2023-11-20 08:12:16 发布

阅读量3.3k

点赞数 1

分类专栏：手机app开发html5 juqery moblie phonegap 文章标签： jquery mobile phonegap 实例 html5 手机

本文链接：https://blog.csdn.net/lzy8395/article/details/39666027

版权

手机app开发html5 juqery moblie phonegap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一次写博文，把学习过程记录下来也留个底，免得以后不用都忘了。

确定用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 ，服务端也搭建好了。