http://my.oschina.net/xiahuawuyu/blog/81763

这两天学习了下，jquery mobile(以下简称jqm)的开发相关的内容。可能之前有过web的开发基础，相对于我来说学习这个东西感觉挺简单的，很容易上手。Jqm的的语法和jquery其实是一样的，有些不大一样的就是了。网上介绍的也是一大堆。这里我主要是做笔记哈。

使用JQM开发其实很简单，我这里目前是针对于在服务器端开发的，服务器使用的是apache+php，前端其实主要是html5+jquery的写法。

1、首先我们可以到官网去下载http://jquerymobile.com/blog/2012/09/21/jquery-mobile-1-2-0-release-candidate-2/#download   query mobile[/url]，然后下载完成后，我们可以看到如下的的目录结构

jqm的包里已经包含了demo和核心代码。jqm提供的demo很全面，直接学习它基本就够了。 既然下载好了，我们就可以进行开发了，概念的东西我就不多说了，直接上代码。

2、编写form表单页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单</title>
    <!--加载jqm css样式-->
    <link rel="stylesheet"  href="css/jquery.mobile-1.2.0-rc.2.css" />
    <!--加载jquery-->
    <script src="js/jquery.js"></script>
    <!--加载jquery mobile-->
    <script src="js/jquery.mobile-1.2.0-rc.2.js"></script> 
    <script src="js/ajax.js"></script> 
</head> 
<body>
      
    <div data-role="page" data-fullscreen="true"><!--data-fullscreen 设置全屏-->
  
    <div data-role="header"   data-position="inline"><!--data-position="inline" 设置以流的方式显示-->
        <a href="index.html" data-icon="delete">Cacel</a> 
        <h1>表单demo</h1>
    </div><!-- /header -->
  
    <div data-role="content">   
        <form id="ajaxForm">
            <div data-role="fieldcontain">
                <label for="username">User Name:</label>
                <input type="text" name="username" id="username" data-mini="true"/>
              
                <h3 id="notification"></h3>
                <button data-theme="b" id="submit" type="submit">Submit</button>
            </div>
        </form> 
    </div><!-- /content -->
  
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
  
</body>
</html>

3、编写服务器端脚本form.php(这里我使用php)

1
2
3
4
<?php
    $username = $_POST['username'];
    echo "User Name：".$username;
?>

4、编写ajax脚本ajax.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function() {
    $('#submit').bind('click', function() {
  
        var formData = $('#ajaxForm').serialize();
        //.serialize() 方法创建以标准 URL 编码表示的文本字符串
       
        $.ajax({
            type : "POST",
            url  : "form.php", 
            cache : false,
            data : formData,
            success : onSuccess,
            error : onError
        });
        return false;
    });
});
  
function onSuccess(data,status){
    data = $.trim(data); //去掉前后空格
    $('#notification').text(data);
}
  
function onError(data,status){
    //进行错误处理
}

4、创建android的工程，使用webview进行访问。

layout：

1
2
3
4
5
6
7
8
9
10
11
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
  
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"  />
  
</RelativeLayout>

java代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
package com.xzw.html;
  
import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
/**
 * 
 * @author xuzw13@gmail.com
 * weibo:http://weibo.com/xzw1989
 *
 */
public class MainActivity extends Activity {
      
    private static final String TAG = "MainActivity"; 
    private WebView webView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
          
        webView = (WebView)findViewById(R.id.webview);
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().supportMultipleWindows();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.loadUrl("http://192.168.1.120/jquerymobile/index.html");
           
          
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
            }
        });
        webView.setWebViewClient(new MyWebViewClient());
          
          
    }
      
    private class MyWebViewClient extends WebViewClient{
        @Override
        public void onLoadResource(WebView view, String url) {
           
                Log.i(TAG, "onLoadResource:" + url);
           
            super.onLoadResource(view, url); 
        }
          
        @Override
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            Log.i(TAG, "onReceivedError:" + failingUrl+" \n errorcode="+errorCode);
            super.onReceivedError(view, errorCode, description, failingUrl);
        }
          
          @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i(TAG, "shouldOverrideUrlLoading:" + url); 
            view.loadUrl(url);
            return true;
        }
            
          @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
                Log.i(TAG, "onPageStarted:" + url); 
        }
            
          @Override
        public void onPageFinished(WebView view, String url) {
              Log.i(TAG, "onPageFinished:" + url); 
              
        }
    };
      
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
         if((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
             webView.goBack();
             return true;
         }
        return super.onKeyDown(keyCode, event);
          
    }
}
代码就是全部代码了。

代码就是全部代码了。 
     
    补充下：jquery mobile的官网都是E文的，E文不是很好的童鞋直接学习jquery mobile的开发可能有些概念的东西没有办法很清楚地理解，我在学习的过程中也遇到了这个问题。不过网上也有个中文版的，但是感觉没有E文版的感觉舒服，不过也很不错，大家学习的时候可以两个一起对照。      
    附上两个地址：

[url= http://jquerymobile.com/demos/1.1.1/ ] http://jquerymobile.com/demos/1.1.1/ [/url]

http://www.jqmapi.com/download.html

欢迎大家一起交流学习！请大家多多指教。

jquery mobile开发笔记之Ajax提交数据（转）的更多相关文章

  1. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  2. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  3. 18个jQuery Mobile开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...

  4. 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据

    昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...

  5. ThinkPHP中ajax提交数据

    最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...

  6. ajax提交数据

    ajax提交数据 注意:获取值可以从方法参数传过来 也可以通过jquery获取对应标签的值:同时参数要与请求的动作方法的参数一致,否则值无法映射 发送 ajax (get 方式简写)请求      注 ...

  7. form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  8. 使用jquery.form.js的ajaxsubmit方法提交数据的Bug

    周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考: 先把问题描述一下,做的功能是使用ajax ...

  9. IOS开发笔记（4）数据离线缓存与读取

    IOS开发笔记(4)数据离线缓存与读取 分类: IOS学习2012-12-06 16:30 7082人阅读 评论(0) 收藏 举报 iosiOSIOS 方法一:一般将服务器第一次返回的数据保存在沙盒里 ...

随机推荐

  1. Mysql通信协议

    Mysql四种通信协议(linux下本地连接的都是socket 其他都是tcp) 当连接mysql时,使用-h127.0.0.1时,linux与unix下的连接协议为socket协议,windows下 ...

  2. linux服务之maven

    curl -O http://mirrors.noc.im/apache/maven/maven-3/3.3.9/binaries/apache-maven-3.3.9-bin.zip [root@d ...

  3. BootstrapValidator验证表单用法

    引入文件 <link rel="stylesheet" href="css/bootstrap.css"/> <link rel=" ...

  4. 黄聪：说说JSON和JSONP，也许你会豁然开朗（转）

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  5. 用Visual Studio调试Windows和驱动程序

    由于本人能力有限,翻译不足之处敬请谅解,欢迎批评指正:sunylat@163.com Visual Studio版本:Visual Studio 2015企业版,中文环境. MSDN原文:https: ...

  6. Bootstrap for MVC：Html.Bootstrap().TextBoxFor(model=>model.Name)

    在上篇博文中提到最近比较忙,也打过招呼Orchard系列文章更新速度可能会放缓,但还是会继续写下去,主要原因在最近想着开发一个新的东西(系统?组件?),等有一定成果时会跟大家分享一些相关的东西,今天介 ...

  7. 随便2--struct pointer

    同为struct,如果struct中没有指针, C 和C++可以用等号赋值,但是一旦里面涉及到指针,就不能用等号,要用memcpy struct A{char v1[20];int v2;} a,b; ...

  8. DDL DML DCL语句

    总体解释:DML(data manipulation language):自动提交的数据库操作语言       它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样 DDL( ...

  9. ios 屏幕概况

    转:http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

  10. hibernate的延迟加载及其与session关闭的矛盾

    延迟加载就是并不是在读取的时候就把数据加载进来,而是等到使用时再加载. 那么Hibernate是怎么知道用户在什么时候使用数据了呢?又是如何加载数据呢? 其实很简单,它使用了代理机制.返回给用户的并不 ...