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="code.jquery/mobile/1.3.bile-1.3.2.min.css"
>
camunda工作流引擎<script src="code.jquery/jquery-1.8.3.min.js"></script>
<script src="code.jquery/mobile/1.3.bile-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>
ecshop和shopex哪个好 <link rel="stylesheet" href="code.jquery/mobile/1.3.bile-1.3.2.min.css">
<script src="code.jquery/jquery-1.8.3.min.js"></script>
<script src="code.jquery/mobile/1.3.bile-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 : "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>
jquery下载的文件怎么使用 <p>Find Contacts</p>
<p><a href="#" onclick="baozi(); return false;">Vibrate</a></p>
<p><a href="#" onclick="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.URLDecoder" pageEncoding="UTF-8"%>
<%
String fullname=URLDecoder.Parameter("fullname"),"utf-8");
《split》在线观看 String bday= Parameter("bday");
String email = Parameter("email");
//String uuid = Parameter("uuid");
System.out.println(fullname);
System.out.println(bday);
//System.out.println(uuid);
String callback =Parameter("callback");
// System.out.println(callback);
供应链小程序怎么开发
out.println(callback+ "([ { name:\"OK\"} ] )");
%>
3.3 发布工程到 myeclipse自带的tomcat服务器，启动tomcat ，服务端也搭建好了。
3.4 用浏览器打开 3.1编写的html ，输入表单提交，服务器后台打印如下信息。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论