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

合集下载

跨平台移动开发技术jQueryMobile的应用分析

／１．２．０￣ｑｕｅｒｙ．ｍｏｂｉｌｅ－１．２．０．ａｉｒｎ．ｊｓ ” ＞＜／ｓｃｒｉｐｔ＞
之后页面中加入的导航列表、按钮、滑动条等内容，将以统一的风格显示，并且可以使用ｄａｔａ — ｔｈｅｍｅ
要一种Ｍｏｂｉｌｅ和ＨＴＭＬ５做移动应用程序的开发，具有开发简
单，发布周期短、跨平台跨设备的优点。￣Ｒ．．ｇｅｆＪＱｕｅｒｙＭｏｂｉｌｅ和ＨＴＭＬ５的应用做了介绍和分析。
一
～
…
～
一
蕊：嚣…
ｅ
跨平台移动开发技术ｊＱｕｅｒｙＭｏｂｉｌｅ的应用分析
朱簧，王玉善
（上海师范大学信息与机电工程学院计算机系上海２００２３４）
【摘要】：目前移动操作系统呈现多个系统共存的局面，开发者如果要迅速地开发某种应用，就需
ｈｒｅｆ＝ ” ｈｔｔｐ：／／ｃｏｄｅ．ｊｑｕｅｒｙ．ｃｏｎｒ／ｍｏｂｉｌｅ／１．２．０
￣ｑｕｅｒｙ．ｍｏｂｉｌｅ－１．２．０．ａｒｉｎ．ＣＳＳ ” ＞
＜ｓｃｉｒｐｔｓｒｃ＝ ” ｈｔｔｐ：／／ｃｏｄｅ．ｊｑｕｅｒｙ．ｃｏｍ
只要使用如下网页代码引入ｊＱｕｅｙｒＭｏｂｉｌｅ的样

jQuery跨域问题解决方案

jQuery跨域问题解决⽅案通过XMLHTTPRquest请求不同域上的数据，原来js跨域访问是后台有个处理路径“/test”的函数。

下⾯把具体解决⽅案介绍如下。

后台处理路径“/test”的函数：复制代码代码如下://路径处理app.get("/test",user.test);//处理函数exports.test=function(req,res){res.end("alert('JS跨域访问')");};外部有⼀个⽹页需要访问路径”/test“下的内容，则可以通过JS脚本⽂件来跨域访问：复制代码代码如下://处理函数<script>function method(data){console.log(data);}</script>//跨域访问<script src="http://localhost:3000/test"></script>结果会在当前的⽹页中弹出⼀个窗⼝：jQuery中JSONP跨域访问的实现：同样在后台有⼀个处理路径“/test”的函数：//路径处理app.get("/test",user.test);//处理函数exports.test=function(req,res){res.end("method("+JSON.stringify({mes:"跨域访问成功！"})+")");};外部有⼀个⽹页需要访问路径”/test“下的内容，通过JSONP来实现跨域访问：//引⼊跨域访问中的jQuery函数库<script src="http://localhost:3000/js/jquery-1.9.1.min.js"></script>//jQuery中JSONP跨域访问<script>$.ajax({url:"http://localhost:3000/test",type:"get",success:function(data){$("body").append(data.mes);},dataType:"jsonp",jsonpCallback:"method"});</script>结果会在当前的⽹页中显⽰如下信息：通过上述代码我们可以看出JSOPN跨域访问和原始的JS跨域访问的不同之处是JSONP不需要写处理跨域访问的函数（例如上述⽅法中使⽤的method函数），在JSONP跨域访问时会⾃动帮我们创建处理跨域访问的函数。

《构建跨平台APP：jQuery Mobile移动应用实战(第》读书笔记模板

第11章在jQuery Mobile中使用插件
11.1 jQuery Mobile插件概述 11.2相册类插件 11.3菜单类插件 11.4选择器插件以及其他插件 11.5如何获取jQuery Mobile插件 11.6小结
第12章 jQuery Mobile界面综合实战
12.1清爽的电子书阅读器 12.2简单的计算器 12.3移动BBS模板 12.4基于jQuery Mobile的简单记事本 12.5基于jQuery Mobile的全键盘界面 12.6小结
第7章表单元素的使用
7.1简单的QQ登录界面 7.2手机调查问卷 7.3精准的进度控制 7.4多彩的调色板 7.5熄灯，请闭眼 7.6做一道选择题 7.7多项选择题 7.8请问先生需要什么服务 7.9对话框中的表单
第8章列表控件的使用
8.1简单的新闻列表 8.2音乐专辑列表的显示 8.3更完善的音乐专辑列表 8.4显示销量的商品列表 8.5图书销售排名 8.6简单的通讯录 8.7让查找更加便捷 8.8比较高级的新闻列表 8.9小结
第14章个人博客项目实战
14.1项目规划 14.2主界面设计 14.3文章列表的设计 14.4文章内容页的实现 14.5文章类的设计 14.6测试环境的搭建 14.7数据库的设计 14.8内容页功能的实现 14.9文章列表的实现
第15章在线音乐播放器
15.1项目介绍 15.2界面布局设计 15.3控制面板功能的实现 15.4界面的实现 15.5数据库的设计 15.6后台的实现 15.7小结
jQuery Mobile是目前最流行的跨平台移动开发框架，本书以实例驱动讲解的方式，让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇，第一篇是移动开发入门篇，介绍了jQuery Mobile、HTML 5和移动开发的一些基础知识，以及如何搭建开发环境；第二篇是jQuery Mobile基础篇，介绍了jQuery Mobile 中对话框、工具栏、按钮、表单、布局和插件的使用；第三篇是跨平台APP实战篇，介绍了6个使用jQuery Mobile开发的实际APP；第四篇是发布和推广应用篇，介绍了在开发完成之后，如何发布和推广自己的APP。本书内容详尽、实例丰富，是广大jQuery Mobile初学者、跨平台移动开发人员必备的参考书，同时也适合作为高等院校和培训学校相关专业师生的教学参考书。

【IT专家】使用 jQuery Mobile 与 HTML5 开发 Web App(十三) —— jQuery Mobile 方法下

本文由我司收集整编，推荐下载，如有疑问，请与我司联系使用jQuery Mobile 与HTML5 开发Web App（十三）——jQuery Mobile 方法下2015/02/27 0 本文承接上文《使用jQuery Mobile 与HTML5 开发Web App —— jQuery Mobile 方法上》，继续说明jQuery Mobile 的方法，这部分内容主要与页面URL 解析相关，除此之外还有其他一些实用方法。

以下两个方法在jQuery Mobile 1.1 中不赞成使用八. $.mobile.fixedToolbars.show()固定工具栏（包括固定的头部栏和尾部栏）可以通过点击屏幕在显示与隐藏之间切换，而这个方法则是手动显示一次工具栏。

它具有一个参数immediately(boolean, 可选) 。

把它设置为true ，当前激活页面的所有固定工具栏都会立即显示出来。

若设置为false 或者没有指定，则会通过100ms 的渐变显示出来。

注意如document 的resize 和scroll 等事件会导致额外的延时显示。

例子：123456// 显示固定工具栏并且显示默认的渐变动画$.mobile.fixedToolbars.show();// 立即显示固定工具栏$.mobile.fixedToolbars.show(true);在jQuery Mobile 1.1 中，不建议使用该方法，jQuery Mobile 并没有明确原因，但根据jQuery Mobile 的习惯，这很可能是因为这个方法有很多不稳定性，如上面提到的遇到某些方法会出现额外的延时显示，这对于建立Web Apps 是很不好的影响因素，它会从底层部分为Web Apps 带来不可预知的问题。

九. $.mobile.fixedToolbars.hide()固定工具栏（包括固定的头部栏和尾部栏）可以通过点击屏幕在显示与隐藏之间切换，而这个方法则是手动隐藏一次工具栏。

jQueryMobile手机网站案例

jQueryMobile⼿机⽹站案例jQuery Mobile⼿机⽹站案例⼀、总结⼀句话总结：jQuery Mobile是纯⼿机框架，和amazeui和bootstrap都可以做⼿机⽹站。

1、另⼀款⽂本编辑器？jd编辑器⼆、jQuery Mobile⼿机⽹站案例1、index.php1<?php2include 'common/config.php';34$sql='select * from message';56$rst=mysql_query($sql);789?>10<!doctype html>11<html>12<head>13<meta charset="UTF-8">14<title>index</title>15<meta name="viewport" content="width=device-width, initial-scale=1.0">16<link rel="stylesheet" href="jm/mobile.css">17<script src="jm/jquery.js"></script>18<script src="jm/mobile.js"></script>19<link rel="stylesheet" href="css/idangerous.swiper.css">20<link rel="stylesheet" href="css/style.css">21<link rel="stylesheet" href="css/swiper-demos.css">22<script src="js/idangerous.swiper-1.9.1.min.js"></script>23<script src="js/idangerous.swiper.scrollbar-1.2.js"></script>24<script src="js/swiper-demos.js"></script>25<style>26 *{27 min-width:0px!important;28 min-height:0px!important;29 }3031 .home-device,.swiper-main,.swiper-container,.swiper1,.swiper-wrapper,.swiper-slide{32 width:100%;33 overflow:hidden;34 }3536 *{37 font-family:微软雅⿊;38 }39</style>40</head>41<body>42<div data-role="page" id="pageone">43<div data-role="header">44<h1>⼿机动漫</h1>45<div data-role="navbar">46<ul>47<li><a href="#a" data-theme='b' data-icon="home" data-rel='dialog'>查看动漫</a></li>48<li><a href="add.php" data-theme='b' data-icon='grid' data-rel='dialog'>发布动漫</a></li>49</ul>50</div>51</div>5253<div data-role="content">54<div class="home-device"><a class="arrow-left" href="#"></a><a class="arrow-right" href="#"></a>55<div class="swiper-main">56<div class="swiper-container swiper1">57<div class="swiper-wrapper">58<div class="swiper-slide"><img src="images/slider1-1.jpg" width='100%'></div>59<div class="swiper-slide"><img src="images/slider1-2.jpg" width='100%'></div>60</div>61</div>62</div>63<div class="pagination pagination1"></div>64</div>65<p>国产动画《新⼤头⼉⼦和⼩头爸爸》已于2013年11⽉28⽇晚20：00在中央电视台少⼉频道《银河剧场》栏⽬⾸播。

jquery 跨域请求的三种方法

一、概述在Web开发中，跨域请求是一个常见的问题。

由于同源策略的限制，浏览器在发送AJAX请求时只能访问相同域名下的资源。

然而，随着互联网的发展，我们经常需要在不同的域名之间进行数据交换，这就需要对跨域请求进行处理。

本文将介绍使用jquery进行跨域请求的三种方法，希望能够帮助开发者更好地理解和应用这一技术。

二、跨域请求的概念我们需要了解跨域请求的概念。

所谓跨域请求，就是在一个域名下向另一个域名发送HTTP请求。

在HTTP协议中，域名是由协议、主机名和端口号组成的。

如果这三者有任何一个不同，就会被认为是跨域请求。

跨域请求受到同源策略的限制，因此需要进行特殊处理才能实现。

三、使用jquery进行跨域请求的三种方法1. jsonpjsonp是一种常用的跨域请求方法。

它利用了HTML元素中的<script>标签可以跨域加载资源的特性。

在jquery中，我们可以使用$.ajax()方法发送jsonp请求。

例如：```javascript$.ajax({url: 'xxxdataType: 'jsonp',success: function(data) {// 处理返回的数据}});```在这个例子中，我们通过设置dataType为'jsonp'来发送jsonp请求。

服务器端需要返回一个以callback函数包裹的JSON数据，jquery会自动执行这个callback函数，并将返回的数据传递给success回调函数。

2. CORSCORS（Cross-Origin Resource Sharing）是一种冠方标准的跨域请求解决方案。

它通过在HTTP头部加入一些特殊的字段来实现跨域资源共享。

在jquery中，我们也可以通过$.ajax()方法发送CORS请求。

例如：```javascript$.ajax({url: 'xxxcrossDom本人n: true,xhrFields: {withCredentials: true},success: function(data) {// 处理返回的数据}});```在这个例子中，我们通过设置crossDom本人n为true来告诉jquery这是一个跨域请求，并通过xhrFields设置withCredentials 为true来发送包含凭据的请求。

jquery中ajax处理跨域的三大方式

jquery中ajax处理跨域的三⼤⽅式由于JS同源策略的影响，因此js只能访问同域名下的⽂档。

因此要实现跨域，⼀般有以下⼏个⽅法：⼀、处理跨域的⽅式：1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。

但ie10以下不⽀持只需要在服务端填上响应头：header("Access-Control-Allow-Origin:*");/*星号表⽰所有的域都可以接受，*/header("Access-Control-Allow-Methods:GET,POST");3.jsonP原理：ajax本⾝是不可以跨域的，通过产⽣⼀个script标签来实现跨域。

因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后，$.ajax⽅法就和ajax XmlHttpRequest没什么关系了，取⽽代之的则是JSONP协议。

JSONP是⼀个⾮官⽅的协议，它允许在服务器端集成Script tags返回⾄客户端，通过javascript callback的形式实现跨域访问。

ajax的跨域写法：（其余写法和不跨域的⼀样）：⽐如/*当前⽹址是localhost:3000*/js代码$.ajax({type:"get",url:"http://localhost:3000/showAll",/*url写异域的请求地址*/dataType:"jsonp",/*加上datatype*/jsonpCallback:"cb",/*设置⼀个回调函数，名字随便取，和下⾯的函数⾥的名字相同就⾏*/success:function(){。

}});/*⽽在异域服务器上，*/app.jsapp.get('/showAll',students.showAll);/*这和不跨域的写法相同*//*在异域服务器的showAll函数⾥，*/var db = require("./database");exports.showAll = function(req,res){/**设置响应头允许ajax跨域访问**/res.setHeader("Access-Control-Allow-Origin","*");/*星号表⽰所有的异域请求都可以接受，*/res.setHeader("Access-Control-Allow-Methods","GET,POST");var con = db.getCon();con.query("select * from t_students",function(error,rows){if(error){console.log("数据库出错："+error);}else{/*注意这⾥，返回的就是jsonP的回调函数名+数据了*/res.send("cb("+JSON.stringify(r)+")");}});}⼆、解决ajax跨域访问、 JQuery 的跨域⽅法JS的跨域问题，我想很多程序员的脑海⾥⾯还认为JS是不能跨域的，其实这是⼀个错误的观点；有很多⼈在⽹上找其解决⽅法，教其⽤IFRAME去解决的⽂章很多，真有那么复杂吗？其实很简单的，如果你⽤JQUERY，⼀个GETJSON⽅法就搞定了，⽽且是⼀⾏代码搞定。

Jauerymobile ajax跨域原理及案例

Jauerymobile ajax跨域原理及案例一、$.getJSON()跨域之原理/*可以跨域请求数据*/其原理是对<script>装载的服务端数据用全局函数(callback)操作首先写个简单示例：(jsonpCallback可动态创建注册成全局函数)<script type="text/javascript">var m = Math.random();var jsonpCallback = new Function("result", "alert(result.data);");</script><script type="text/javascript" src="http://localhost/json.php?jsonp=jsonpCallback"></script >服务端:<?phpecho "jsonpCallback({data:'json data'})";会弹出:json data$.get(url, params, callback)与$.post请求方法一样，只是请求类型不同返回的是字符格式,可以用 $.evalJSON()方法进行转换格式然后对JSON对象进行操作$.getJSON(url, params, callback)返回JSON对象，跨域示例如下:1.1. <?php2. function getdata()3. {4. $.getJSON(5. "/payment/payment/paytest?callback=?",6. {id:1,name:"name"},7. function(jsondata){8. alert(jsondata.json);9. });10. }11.12. 翻开jquery.的源码，一步步找:13.14. getJSON: function( url, data, callback ) {15. return jQuery.get(url, data, callback, "json");16. }17.18. 再找JQuery.get19.20. get: function( url, data, callback, type ) {21. // shift arguments if data argument was omited22.23. if ( jQuery.isFunction( data ) ) {24. type = type || callback;25. callback = data;26. data = null;27. }28.29. return jQuery.ajax({30. type: "GET",31. url: url,32. data: data,33. success: callback,34. dataType: type35. });36. }37.38. 再找 jQuery.ajax39.40. jQuery.ajax({41. url: url,42. type: type,43. dataType: "html",44. data: params,45. complete: function( res, status ) {46. // If successful, inject the HTML into all the matched elements47. if ( status === "success" || status === "notmodified" ) {48. // See if a selector was specified49. self.html( selector ?50. // Create a dummy div to hold the results51. jQuery("<div />")52. // inject the contents of the document in, removing the scripts53. // to avoid any 'Permission Denied' errors in IE54. .append(res.responseText.replace(rscript, ""))55.56. // Locate the specified elements57. .find(selector) :58.59. // If not, just inject the full result60. res.responseText );61. }62.63. if ( callback ) {64. self.each( callback, [res.responseText, status, res] );65. }66. }67. });68.69. return this;70. }71.72. 再找ajax方法，揭开秘密要来了:73.74. 由于太多，帖开头部分，有兴趣的同学自己去看下75.76. ajax: function( origSettings ) {77. var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);78.79. var jsonp, status, data,80. callbackContext = origSettings && origSettings.context || s,81. type = s.type.toUpperCase();82.83. // convert data if not already a string84. if ( s.data && s.processData && typeof s.data !== "string" ) {85. s.data = jQuery.param( s.data, s.traditional );86. }87.88. 比较重要的一部分:89.90. http://localhost/index/ajax?callback=jsonp1274437815229&id=191.92. 服务器判断是否有这个callback参数，如果有就返回JS函数名＋对象93.94. //jsonp = jsonp1274437815229（请求地址的回调参数）95.96. //jsonp全局函数97. window[ jsonp ] = window[ jsonp ] || function( tmp ) {98. data = tmp;99. success();100. complete();101. // Garbage collect102. window[ jsonp ] = undefined;二、用jquery的ajax跨域请求案例和注意事项业务需求：一台独立的新闻服务器（A），对外提供新闻。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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以下代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Contact Example</title><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><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><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=".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在手机上面跑起来。